Question

我试图在下面的每次迭代中将文本（先前创建的数组中的值）附加到DIV。 Ajax调用似乎等待返回其输出，直到所有迭代完成。

有没有办法在每次迭代期间追加？

感谢。

var inputValue = [];

$("form#null_form :input[type=text]").each(function () {
    inputValue.push($(this).prop('value'));
});

for (var i = 1; i < inputValue.length; i++) {
    $.ajax({
        url: "http://urlthatdoessomething.xxx",
        type: 'POST',
        dataType: 'json',
        success: function (output_string) {
            $('#results').append('<p class=\"normal-msg\">' + inputValue[i] + ' column successfully converted...</p> ');
        },
        error: function (output_string) {
            $('#results').append('<p class=\"error-msg\">ERROR:  Check spelling and try again... </p> ');
        }
    });
}

Answer 1

根据定义，AJAX是异步的。这意味着您的代码在继续执行for循环之前不会等待来自http://urlthatdoessomething.xxx的响应。实际上，for循环会快速生成所有AJAX请求，并且当响应进来时，会附加文本。迭代已经发生，事实上它们在时间上很接近，响应似乎全部同时回来，并且所有文本似乎同时被附加。

这个问题的解决方案是在AJAX函数的回调中调用下一个请求，而不是使用for循环。这样，下一个请求将在前一个请求完成之前执行，从而为您提供迭代之间的预期时间。

var requestsCount = 1;
function makeRequest(i) {
    $.ajax({
        url: "http://urlthatdoessomething.xxx",
        type: 'POST',
        dataType: 'json',
        success: function (output_string) {
            $('#results').append('<p class=\"normal-msg\">' + inputValue[i] + 
              ' column successfully converted...</p> ');
            if (requestsCount < inputValue.length) {
                makeRequest(requestsCount + 1);
                requestsCount ++;
            }
        },
        error: function (output_string) {
            $('#results').append('<p class=\"error-msg\">
               ERROR:  Check spelling and try again... </p> ');
        }
    });
}
makeRequest(inputValue[1]);

附注：以上是您的代码的翻译。您可能打算在for循环中编写var i = 0，因为数组是零索引的。如果是这种情况，请将var requestsCount = 1;更改为var requestsCount = 0;，将makeRequest(inputValue[1]);更改为makeRequest(inputValue[0]);。

如何让Ajax返回先前请求的值？

1 个答案: