模态框加载update.php动态表格点击编辑无响应页面卡顿问题求助

你遇到的页面卡顿、点击无响应的问题由多个错误共同导致，具体问题和修复方法如下：

• 核心卡顿原因：非法HTML结构导致浏览器渲染崩溃
  update.php中你在<tr>和<td>之间插入了</br>标签，table的子元素仅允许是thead/tbody/tr，tr的子元素仅允许是th/td，非法标签插入到table结构中会导致浏览器解析DOM时反复重排，直接触发页面卡死，需要删除所有插入到tr内部的</br>标签。
• Bootstrap模态框调用方法错误
  你用jQuery原生的toggle("show")控制Bootstrap模态框是无效的，Bootstrap模态框有专属的实例控制方法，应该调用$("#Modal1").modal('show')打开模态框，用原生toggle会破坏Bootstrap自带的过渡动画和事件绑定，容易触发异常。
• 后端参数接收缺失
  前端AJAX传递的参数是id: peid，但update.php中没有接收POST参数的逻辑，直接使用了未定义的$search_value，会导致SQL查询报错或无返回结果，需要在update.php开头补充参数接收代码。
• 重复ID冲突
  代码中存在多个重复的modal-nameID，后续如果要做保存提交逻辑，会出现元素选择异常，建议修改为唯一ID，或者增加类选择器用于后续取值。
• 异步逻辑顺序错误
  你现在是先弹出模态框再发起AJAX请求，会出现模态框弹出后内容空白闪烁的问题，建议调整为AJAX请求成功、内容加载完成后再弹出模态框。

修复后的前端JS代码 #

$(document).on("click", ".edit-btn", function(e) {
    // 阻止默认事件避免冒泡异常
    e.preventDefault();
    var peid = $(this).data("eid"); 
    $.ajax({
        url: "update.php",
        type: "POST",
        data:{
            id: peid
        },
        success: function(data) {
            $("#Modal1 table").html(data);
            // 内容加载完成后再弹出模态框
            $("#Modal1").modal('show');
        },
        // 增加错误回调方便排查问题
        error: function() {
            alert('加载数据失败，请重试');
        }
    });
});

修复后的update.php代码 #

// 接收前端传递的ID参数，同时做基础的SQL注入防护
$search_value = mysqli_real_escape_string($conn, $_POST['id']);
$sql = "select * FROM table1 WHERE pname='" . $search_value . "'";
$result = mysqli_query($conn, $sql) or die("Query failed");
$output = "";
if (mysqli_num_rows($result) > 0)
{
    while ($row = mysqli_fetch_assoc($result)) {
        // 删除所有非法</br>，修正重复ID，增加通用类名
        $output .= "<tr>
        <td>Policy Name</td>
        <td><input type='text' class='modal-input' id='modal-name1' value='{$row["pname"]}'></td>
        </tr>
        <tr>
        <td>Source Address</td>
        <td><input type='text' class='modal-input' id='modal-src' value='{$row["src"]}'></td>
        </tr>
        <tr>
        <td>Destination Address</td>
        <td><input type='text' class='modal-input' id='modal-dst' value='{$row["dst"]}'></td>  
        </tr>
        <tr>
        <td>Ports</td>
        <td><input type='text' class='modal-input' id='modal-ports' value='{$row["ports"]}'></td>
        </tr>
        <tr>
        <td><input type='button' id='submit-btn-modal' value='Save'></td>
        </tr>";
    }
    mysqli_close($conn);
    echo $output;
}
else {
    echo "<tr><td colspan='2'><h2>No Record Found.</h2></td></tr>";
}

安全提示：当前代码仍存在SQL注入风险，建议替换为mysqli预处理语句执行查询，避免被恶意攻击。

内容的提问来源于stack exchange，提问作者skkh