jQuery更新数据后调用reload()刷新页面失效如何解决？

问题原因 #

1. 提交按钮未指定类型，触发表单默认提交行为，中断了AJAX后续执行逻辑
   模态框内的保存按钮放在<form>标签内，未声明type="button"，浏览器会默认将其识别为提交按钮，点击后自动触发表单提交刷新页面，AJAX的成功回调逻辑还没执行就被中断，导致reload不生效。
2. PHP接口响应逻辑错误
   你在update_item.php中写的JS跳转代码，在AJAX请求场景下不会自动执行，只会作为普通字符串返回给前端，完全多余还会干扰前端判断。
3. 字段ID不匹配（可核对）
   HTML中输入框的ID为et_ii_demanded_id、et_ii_demanded_name，但JS中取值用的是et_id、et_name，无法正确获取参数，若你实际更新功能正常，大概率是贴代码时遗漏了修改，建议核对。

解决步骤 #

1. 修改保存按钮属性，阻止默认表单提交

<!-- 加上type="button" -->
<button type="button" onclick="updateItem();" class="btn btn-primary" >Save Changes </button>

2. 重写update_item.php逻辑，仅返回状态标识（顺便补充SQL注入防护）

<?php
include 'connection.php';
// 强制转整型防注入
$id = intval($_POST["id"]);
// 转义字符串防注入
$name = mysqli_real_escape_string($con, $_POST["name"]);
$query = mysqli_query($con, "UPDATE item SET ib_name = '$name' WHERE ib_id = ".$id);
if ($query) {
    echo "success";
} else {
    echo "fail";
}
mysqli_close($con);
?>

3. 修正JS代码，核对字段ID后再执行重载

function updateItem() {
    // 字段ID和HTML保持一致，不对的话自行调整
    var id= document.getElementById("et_ii_demanded_id").value;
    var name = document.getElementById("et_ii_demanded_name").value;
    $.ajax({
        url: "update_item.php",
        type: "POST",
        data: {'id': id, 'name': name},
        success: function (result) { 
            // 去除返回值前后空白字符再比对
            if(result.trim() === 'success'){
                window.location.reload(true);
            }else{
                alert('更新失败，请重试');
            }
            console.log(result);
        }
    });
}

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