Question

我对jQuery中的AJAX调用有疑问这是我想解决的问题：

致电服务器以获取代码列表
对于每个代码，再次调用服务器以获取客户列表
显示结果

我有一个像这样的代码片段（它几乎是一个伪代码;只是想提一下感兴趣的部分）：

$('button#myButton').click(function() {
    var codes = [];
    var customers = [];

    $.ajax({
        // URL etc. Properties,
        async: false
    }).done(function(codes) {
        // Update the values in the 'codes'  array to be used later
    });

    // Use the 'codes' array to get the customers for each code
    //    and populate the 'customers' array
    $(codes).each(function() {
        $.ajax({
            // URL etc. Properties,
            async: false
        }).done(function(customers) {
            // Populate the 'customers' array
        });        
    });

    // Display the results (using both arrays) in a 'div'
});

现在，这是我的问题：
起初，我想使用2个嵌套getJSON调用来做这件事，但无论我怎么努力，我都无法使它工作（第二个调用等待第一次调用完全完成然后启动致电）

然后，在这里搜索，我看到有人建议将async函数设置为false，现在看来，调用的行为与代码的行为相同

我唯一不理解的是我收到关于Synchronous XMLHttpRequest on the main thread is deprecated的警告，在jQuery的网站上，提到使用success/error/complete方法，但如果我禁用async ，然后调用的顺序混乱（至少我无法理解顺序），当我到达第二个调用时，我的codes数组是空的，所以没有什么可做的！

任何帮助都表示赞赏，因为我花了整整一个上午努力让它发挥作用！

更新

谢谢大家的回答。也许如果我提到我应该如何显示结果，它会使事情变得更清楚我试图在表格中显示“代码”，“费率”，然后是“客户”

当我完成第一次AJAX调用时，我的前两列的值已经存在，所以我可以添加相应的tr s（和td s），但是当我到达时第二个AJAX调用，我必须通过每个代码来获取每个代码的“客户”（来自服务器）

如果我将所有逻辑放入第二个AJAX调用的complete方法中，我的所有行都没有第三列，所以我需要以某种方式将客户添加到每行的最后td ，我不知道怎么样!!!

Answer 1

呼叫是（或至少应该）按照他们在代码中的顺序运行。但是，如果您删除async: false，则您无法提前知道哪个先完成这就是你应该使用回调方法的原因就个人而言，我会删除async: false并从第一个success函数中调用第二个ajax。

Answer 2

解决这个问题的方法是进行第一次ajax调用，然后在该ajax调用的回调中，进行迭代并将所有调用的Deferreds添加到数组中。
然后，使用$.when.apply，您可以在完成所有这些请求时添加回调，并获取“customers”，类似这样的

$('button#myButton').click(function() {

    $.ajax({
        // URL etc. Properties,
    }).done(function(codes) {
        var requests = $.map(codes, function(i, code) {
            return $.ajax({
                url  : '/get_the_codes',
                data : {code : code}
            });
        });

        $.when.apply($, requests).then(function(customers) {
            $.each(customers, function(i, customer) {
                $('div').append(customer);
            });
        }, function(err) {

        })
    });
});

一个更好的选择是创建一个服务器端来执行此操作，因此只需要一个请求，服务器将获取代码，迭代并创建客户数组等，以及把它们全部送回去。

在jQuery AJAX中使用async选项

更新

2 个答案: