Question

我遇到了以下问题。

我有以下嵌套/ foreach循环ajax调用结构：

var children = [];
$.fn.ajaxHelper.loadAjax({
    url: someUrlReturningJsonOfChildren,
    cache: true,
    callback: function(options) {
        var json = options.json;
        $.each(json, function (i) {
            // get the details of this child
            $.fn.ajaxHelper.loadAjax({
                url: urlForDetailsUsingId,
                cache: true,
                callback: function(options) {
                    var json = options.json;
                    children[i] = json;   
                }
            });
        }
    }
});
// want to do something with (newly filled) children here

你可以想象，我遇到麻烦，ajax调用是异步的（duh），但是我想在所有的ajax调用完成后才对子数组做一些事情。否则我显然在处理一个不完整的数组。

我一直在研究一些jQuery解决方案，比如Deferred对象（使用$ .when（）。then（）等），但如果我没有foreach-loop，那只会解决问题（至于我可以告诉）。

此外，由于有关API的指定要求，更改REST API（ajax调用所在的位置）不是一个选项。

好的，所以不用多说：你们这些天才能帮助我吗？： - ）

Answer 1

默认情况下，ajax是异步的，但您可以将其关闭。这里有API如何做到

https://api.jquery.com/jQuery.ajax/

heres a little demp

$.ajax({
   url: my_url.php,
   type: "POST",
   async: false,
   dataType: 'json'
});

或者只是在成功功能中进行下一个ajax调用（推荐）

function testAjax(handleData) {
   $.ajax({
   url:"getvalue.php",  

   success:function(data) {
      //next ajax call here
   }

 });
}

Answer 2

您必须在上次查询成功完成时运行ajax查询（在jQuery onSuccess回调中）

Answer 3

我有一个微笑问题......下面是我的解决方案的简化版本。

第一步：声明全局变量。

var results1,
    results2,
    [resultsN];

第二步：创建一个接受每个AJAX调用结果作为参数的函数。

function foo(results1, results2, [resultsN]) {
    if (results1, results2, [resultsN]) {
        //... do whatever you want with all of your results
    }
}

第三步：调用所有AJAX函数，将结果设置为全局变量，并为每个函数调用函数foo。

function ajax() {
    //AJAX call 1
    $.ajax({
        type: 'POST',
        url: //URL,
        success: function (data, textStatus, jqXHR) {
            results1 = data;
        },
        dataType: 'json',
        complete: function () {
            foo(results1, results2);
        }
    });

    //AJAX call 2
    $.ajax({
        type: 'POST',
        url: //URL,
        success: function (data, textStatus, jqXHR) {
            results2 = data;
        },
        dataType: 'json',
        complete: function () {
            foo(results1, results2);
        }
    });
};

此方法的优点是运行速度与最长的AJAX调用一样快。如果您只是在complete事件中嵌套AJAX查询，那么您必须等待每个AJAX调用完成才能转移到下一个...

使用嵌套的ajax调用Ajax调用

3 个答案: