为什么第二个ajax方法在第一个之前运行？

Question

我正在尝试链接两个ajax。第一个 ajax 将记录添加到数据库中，但是第二个 ajax 调用仍然在第一个 ajax 调用之前运行？有什么想法为什么吗？

let promise = new Promise(function(resolve, reject){        
    resolve(true)
});

promise.then(function successValue(){
    $("#addPersonnelForm").on("submit", function () {
        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) {
            }
        });     
    }); 
})
.then(function successValue1(){
    $.ajax({
        url:    "php/retrievePersonnel.php",
        type:   "POST",
        dataType:"JSON",
        success: function (result) {    
            var markup = "";
            markup += '<tr>';
            markup += '<td>' + result.data[0].firstName + result.data[0].lastName + result.data[0].jobTitle+ result.data[0].email + '</td>';
            markup += '<td><button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editPersonnelModal" data-id = '+result.data[0].id+'> <i class="fa-solid fa-pencil fa-fw"> </i></button><button type="button" class="btn btn-primary btn-sm deletePersonnelBtn" data-bs-toggle="modal" data-bs-target="#deletePersonnelModal" data-id= '+ result.data[0].id+ '> <i class="fa-solid fa-trash fa-fw"></i> </td>';
            markup += '</tr>';
            $("table").append(markup);
        }
    }); 
});

我对这个概念相当陌生，需要一些指导。

Answer 1

因为第二个 then 函数中有一个 POST，所以它首先在服务器上运行，然后 Promise 在浏览器中运行。