如何实现AJAX请求顺序执行？插入数据库记录后再查询

问题核心是两个异步请求的执行顺序错误：页面加载时直接执行了查询请求，而表单提交后的插入操作完成后，并未触发新的查询，导致获取的始终是旧数据。以下是修正方案：

修正思路 #

• 将查询逻辑封装为独立函数，便于复用
• 在插入AJAX的success回调中调用查询函数，确保插入操作完成后再获取最新数据
• 阻止表单默认提交行为，避免页面刷新中断请求流程

修正后的代码 #

$(document).ready(function() {
    // 封装查询人员数据的函数
    function retrievePersonnel() {
        $.ajax({
            url: "php/retrievePersonnel.php",
            type: "POST",
            dataType: "JSON",
            success: function(result) {
                // 这里处理查询到的最新数据，比如更新页面显示
                console.log("最新人员数据：", result);
            }
        });
    }

    // 页面加载时执行初始查询
    retrievePersonnel();

    $("#addPersonnelForm").on("submit", function(e) {
        // 阻止表单默认提交行为，避免页面刷新
        e.preventDefault();

        departmentName = $("#selectPersonnelDepartment option:selected").text();
        $.ajax({
            url: "php/insertPersonnel.php",
            type: "POST",
            dataType: "JSON",
            data: {
                firstName: $("#addPersonnelFirstName").val(),
                lastName: $("#addPersonnelLastName").val(),
                emailAddress: $("#addPersonnelEmailAddress").val(),
                jobTitle: $("#addPersonnelJobTitle").val(),
                departmentID: $("#selectPersonnelDepartment").val()
            },
            success: function(result) {
                // 插入成功后立即查询最新数据
                retrievePersonnel();
                // 可选：重置表单或给出成功提示
                $("#addPersonnelForm")[0].reset();
                alert("人员添加成功");
            },
            error: function() {
                alert("人员添加失败，请重试");
            }
        });
    });
});

关键修改说明 #

• 抽离retrievePersonnel()函数，既用于页面初始化查询，也用于插入成功后的实时查询
• 表单提交事件中添加e.preventDefault()，防止页面自动刷新导致请求中断
• 将查询操作放入插入请求的success回调内，确保只有插入完成后才会获取最新记录
• 增加错误回调，便于捕获插入失败的情况

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