根据前一个ajax调用返回的数据执行未知数量的并行ajax调用

Question

我有一个PHP后端，它返回一个JSON对象（实际上是一个2D数组，我可以引用它作为json[0][0]例如，我不知道为什么，但我没有解析JSON对象）在两个车站之间的火车上的信息（列车编号，运行天数等）。

现在我想查询每列火车的可用性。 我已经有了php脚本（它还返回一个JSON对象，提供指定日期以及接下来5天的可用性。）。

这个可用性PHP脚本需要一些输入作为每个嵌套（使用的错误术语？）数组的第一个元素，例如： json[0][0], json[1][0], json[2][0]如果有3列火车返回

我希望这些信息作为对并行ajax调用的响应而返回。 最后，我想根据这些响应创建一个表。 我的问题是：

1. 由于我不知道预先返回的列车数量，因此需要进行并行ajax调用的次数，我该如何编码这部分？
2. 进行并行呼叫的最佳方式似乎是$。但是，如何在这个问题中使用它？

我刚刚开始编写函数，并且有类似的东西，是的，我是JS和jQuery的全新手：

$(document).ready(function() {
$("form").submit(function(){    
    event.preventDefault();

    $.ajax({
      //type: "POST",
      url: "./trains_bw_stations.php",
      dataType: 'json',
      data: { source: $('input[name*="src"]').val(), destination: $('input[name*="dstn"]').val(), 
                day: $('input[name*="day"]').val(), month: $('input[name*="month"]').val(), cl: $('input[name*="cl"]').val()  }
    })
      .done(function(trains) {
        console.log(trains)
        var requests = [], allData = {};

        for (var i = 0; i < trains.length; i++) {
            console.log(trains[i][0]);
            requests.push($.ajax({
                url: './availability.php', 
                dataType: 'json',
                data: { 
                        day: $('input[name*="day"]').val(), month: $('input[name*="month"]').val(),lccp_trndtl: trains[i][0]  }
                // success: function(data) {
                //  console.log(data);
                //     allData[''+i] = data;

            }).done(function(data) {
                    console.log(data);
                    allData[i] = data})
            );
        }

        $.when.apply(requests).then(function() {

            console.log(allData) // this is line 41

            }
            // all requests have completed
            // allData array now contains the data from all the requests
            // put your processing logic in here...
        });
    });
    });
    });

allData仍为空！ 控制台输出：

XHR finished loading: GET "http://localhost/irl_poster/trains_bw_stations.php?source=ndls&destination=hyb&day=7&month=8&cl=SL". jquery-2.1.1.min.js:4
[Array[15], Array[15], Array[15]]
 ajaxRequests.js:19
12650NZM KCG YYYNYNYYA ajaxRequests.js:23
12724NDLSHYB YYYYYYYYA ajaxRequests.js:23
12722NZM HYB NYYYYYYYA ajaxRequests.js:23
Object {} ajaxRequests.js:41
XHR finished loading: GET "http://localhost/irl_poster/availability.php?day=7&month=8&lccp_trndtl=12650NZM+KCG+YYYNYNYYA". jquery-2.1.1.min.js:4
Object {0: Array[4], 2: Array[4], 4: Array[4], 6: Array[4], 8: Array[4], 10: Array[4]}
 ajaxRequests.js:34
XHR finished loading: GET "http://localhost/irl_poster/availability.php?day=7&month=8&lccp_trndtl=12724NDLSHYB+YYYYYYYYA". jquery-2.1.1.min.js:4
Object {0: Array[4], 2: Array[4], 4: Array[4], 6: Array[4], 8: Array[4], 10: Array[4]}
 ajaxRequests.js:34
XHR finished loading: GET "http://localhost/irl_poster/availability.php?day=7&month=8&lccp_trndtl=12722NZM+HYB+NYYYYYYYA". jquery-2.1.1.min.js:4
Object {0: Array[4], 2: Array[4], 4: Array[4], 6: Array[4], 8: Array[4], 10: Array[4]}

Answer 1

你的$.when.apply调用中有一个错误 - 它需要一个初始上下文参数，通常$

您的代码也遇到了在异步回调中使用循环变量i的常见问题，此时它不再保留其原始值，结果全部以allData[trains.length + 1]

因此，不是试图在.done回调中累积allData[i] ，而是可以完全删除该.done调用，然后在.when().then()回调中，您可以使用arguments数组来访问单个结果，它将自动以正确的顺序出现：

$.when.apply($, requests).then(function() {

    // convert the arguments array, where each argument is in the form
    // [data, textStatus, jqXHR], into an array of just the data values
    var allData = [].map.call(arguments, function(arg) {
        return arg[0];
    });

    ...
});

使用Array.prototype.map也可以略微简化初始请求循环：

var requests = trains.map(function(train) {
    // no "i" variable needed - use "train" instead of "train[i]"
    return $.ajax({
        ...
    });
});

Answer 2

你是正确的，你需要使用$.when ，虽然你的语法有点偏。 尝试这个：

.done(function(json) {
    var requests = [], allData = [];

    // loop over your result, amend as needed
    for (var i = 0; i < json.length; i++) {
        requests.push($.ajax({
            url: 'foo.html', // build as needed using properties of json
            success: function(data) {
                allData.push(data);
            }
        }));
    }

    $.when.apply(requests).then(function() {
        // all requests have completed
        // allData array now contains the data from all the requests
        // put your processing logic in here...
    });
});

---

如果需要维护接收数据的顺序，可以将allData变量更改为一个对象，由循环索引键入：

// note: amended lines only
var requests = [], allData = {};

success: function(data) {
    allData[i] = data;
}