使用jQuery Ajax更新行后如何阻止页面刷新

你的问题核心在于在Ajax的success回调里调用了location.reload(true)，这会强制页面刷新。要实现无刷新更新表格内容，我们可以手动更新对应行的DOM元素，而不是重载整个页面。下面是具体的修改步骤：

步骤1：给表格行添加唯一标识 #

首先在add_user.php渲染表格行的时候，给每个<tr>标签加上data-id属性，方便后续精准定位到要更新的行：

// 把原来的 echo "<tr>"; 修改为：
echo "<tr data-id='".$row['id']."'>";

步骤2：修改Ajax更新的回调函数 #

找到add_user.php里的更新按钮Ajax代码，去掉location.reload(true)，并添加代码手动更新表格行内容：

$('.update').on('click',function(){
    $.ajax({
        method:"POST",
        url: "edit_user.php",
        data:$('#editform').serialize(),
        dataType: 'json',
        success: function(response) {
            // 清空模态框表单内容（可选，提升用户体验）
            $('#userName').val('');
            $('#email').val('');
            $('#position').val('');
            
            $('#editmodal').modal('hide');
            
            // 获取更新后的用户数据
            const updatedUser = response.data;
            // 定位到对应的表格行
            const targetRow = $(`#myTable tr[data-id="${updatedUser.id}"]`);
            
            // 更新行内的各个单元格内容
            targetRow.find('td:eq(0)').text(updatedUser.name); // 第一列：Name
            targetRow.find('td:eq(1)').text(updatedUser.email); // 第二列：Email
            targetRow.find('td:eq(2)').text(updatedUser.position); // 第三列：Position
        }
    });
});

额外优化：删除功能也改为无刷新（可选） #

你的deleteUser函数目前是通过跳转页面实现的，也可以改成Ajax无刷新删除，进一步提升体验：

function deleteUser(userId) {
    var ask = window.confirm("Are you sure you want to delete?");
    if (ask) {
        $.ajax({
            method: "POST",
            url: "del_user.php",
            data: {id: userId},
            success: function() {
                // 删除成功后直接移除对应的表格行
                $(`#myTable tr[data-id="${userId}"]`).remove();
            }
        });
    }
}

同时记得修改del_user.php，让它处理POST请求并返回成功状态（不需要跳转页面）。

这样修改后，无论是更新还是删除操作，都能在不刷新页面的情况下完成表格内容的实时更新啦～

内容的提问来源于stack exchange，提问作者Parteek Kumar Kherpa