在ajax调用运行之前为变量分配值

Question

我在ajax调用中传递变量时遇到问题。 Ajax调用使用变量的默认值，可能是因为它异步运行。

jQuery

$(".add-spouse").on("click", function(){
    var spouse_ids = [];
    var last_id = 0;
    var spouse_wrapper = $('#spouse_wrapper');

    if($(".spouse_info").length){
        $(".spouse_info").each(function(){
            spouse_ids.push($(this).data("id"));
        });

        last_id = Math.max.apply(Math, spouse_ids);
    }

    $.ajax({
        url: '/spouses/create',
        method: 'GET',
        data: {
            id: last_id
        },
        success: function($result){
            spouse_wrapper.append($result);
        }
    });

    console.log(last_id);

});

总是在ajax调用中传递的id是0。我使用控制台日志，并得到了递增值0，1，2等，但是当我检查通过ajax调用传递的参数时，它始终是0。如何在运行之前在ajax调用中传递id的值？

请参阅下面的屏幕截图。

这是控制台日志：

这是ajax调用接收到的查询字符串参数

如您所见，在控制台日志上，该值从0递增到1。但是在查询字符串参数上（请参见图像的左侧），第一个传递的是0，第二个仍然是0。

Answer 1

您的.spouse_info元素似乎从未更新过？

Ajax调用将项追加到spouse_wrapper，而不是用来查询子项吗？

除了数组永远不会大于0的事实之外，我没有看到直接的缺陷。

编辑：由于我不知道到底是什么引起的，所以让我们分解一些东西：

$(".add-spouse").on("click", function(){
    var spouse_ids = [];
    var last_id = 0;
    var spouse_wrapper = $('#spouse_wrapper');

    if($(".spouse_info").length){
        $(".spouse_info").each(function(){
            spouse_ids.push($(this).data("id"));
        });

        last_id = Math.max.apply(Math, spouse_ids);
    }

    const ajaxData = {
        url: '/spouses/create',
        method: 'GET',
        data: {
            id: last_id
        },
        success: function($result){
            spouse_wrapper.append($result);
        }
    };
    console.log(ajaxData);
    $.ajax(ajaxData);

    console.log(last_id);

});