javascript - 根据先前 ajax 调用返回的数据执行未知数量的并行 ajax 调用

Question

我构建了一个返回 JSON 对象的 php 后端(实际上是一个二维数组，我可以将其引用为 json[0][0] 例如，我不知道为什么，我没有解析 JSON 对象)的信息(车次、运行日期等)在两个车站之间的火车上。

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

此可用性 php 脚本需要一些输入作为每个嵌套(使用错误的术语？)数组的第一个元素，例如:json[0][0]、json[1][0]、json [2][0]如果返回 3 列火车

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

1. 由于我事先不知道将要返回的列车数量，因此不知道要进行的并行 ajax 调用的数量，我该如何编写这部分代码？
2. 进行并行调用的最佳方法似乎是 $.when，我如何在这个问题中使用它？

我刚刚开始编写函数，并且有这样的东西，是的，我是 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({
        ...
    });
});