如何进行多个ajax调用，并在每次调用后更新用户界面

Question

我正在为一些大型查询制作一个脚本，并避免在php端超时，加上给用户一些输入，我试图在jquery上做大部分。

所以它的工作原理是这样的：首先，用户在一个select上选择一条记录。当他单击按钮时，我接到一个ajax调用，从json格式的记录中获取所需的详细信息。

通过响应，我得到了一个循环，对第一次调用的每个结果进行ajax调用。

如果我将async设置为false，它会工作，但是浏览器会死机，因为有几个ajax调用。那么有没有办法在关闭async的情况下更新用户界面呢？

我的意思是，当我在一个循环中进行ajax调用时，我需要将async设置为off，这对我来说没有任何意义。它可以同时进行几个调用，我对此没意见，但是为什么它不获取循环中的当前索引，除非我将async设置为false？它一直使用第一个索引。

    $("#button_copy").live('click', function(){
        $('#button_copy').attr("disabled", true);
        id = $('#select').val();
        $.ajax({
            type: "POST",
            url: "query1.php",
            dataType: 'json',
            async:false,
            cache: false,
            data: 'id=' + id,
            success: function( data ) {
                var total1 = data['records'].length;
                $("#console").append('Total query 1: ' + total1 + '<br />');
                for (var i in data['records']) {
                    $.ajax({
                        type: "POST",
                        url: "query2.php",
                        dataType: 'json',
                        async:false,
                        cache: false,
                        data: 'id=' + data['records'][i].id,
                        success: function( data2 ) {
                            var total2 = data2['records2'].length;
                            $("#console").append('Total of query 2 from ' + data['records'][i].person + ': ' + total2 + '<br />');
                        },
                        error: function(data2) {
                            console.log(data2);
                        }
                    });
                    var percentprogress1 = (i / total1) * 10000;
                    $('#progressbar1').css('width',percentprogress1 + '%');
                }
            },
            error: function(data) {
                console.log(data);
            }
        });
    });

Answer 1

我自己也遇到了类似的问题。我在while循环中运行了一系列ajax请求。有些调用没有被发出！这要了我的命！！我的结论是我的浏览器——谷歌Chrome——忽略了“重复”请求。

看看这段伪代码:

while (i < ajaxCallArray.length) {
    currentAjaxObject = ajaxCallArray[i];
    ajaxPost = $.post(currentAjaxObject.url, function(data) {
    //response data needs to go into a function such that each request gets its own "data" variable created.otherwise it just overwrites data!!
    processAjaxResponse(data, currentAjaxObject);
        },"json");
i++;
}

如果阿贾克斯呼叫阵列[0].url =“http://www.google.com”，阿贾克斯呼叫阵列[1].url =“http://www.google.com”，而阿贾克斯呼叫阵列[2].url=“http://www.google.com”，浏览器实际上只会进行1次调用！！

解决方案：您必须执行类似于ajaxCallArray[0]的操作。url=“http://www.google.com?count=0“，ajaxCallArray[1]。url=”http://www.google.com?count=0“和ajaxCallArray[2]。url=”http://www.google.com?count=0“即使您不使用这些url参数，也只需将它们区分开来。这样，浏览器将处理所有调用，即使它们立即完成。

希望这有帮助！！

Answer 2

您会遇到问题，因为您试图在回调中使用< code>i,但是当回调被调用时,< code>i不再具有其原始值。您也不应该将< code >用于...in on array -仅在对象上。

我建议不要使用任何类型的 for 循环，而是在完成前一个 AJAX 调用时触发每个连续的 AJAX 调用：

$.ajax(...).done(function(data) {

    var all = data.records;
    (function next() {
        var record = all.shift();
        if (record) {
            $.post(...).done(next, function(res) {
                // process inner result
                // update UI, etc
                ...
            });
        }
    })();       // invoke immediately

});

注意，我在两个AJAX调用中使用了“deferred”语法，而不是传递success:处理程序。

在“伪递归”循环中，注意到我使用了。完成（next，…），它允许循环与当前调用结果的处理并行启动下一个AJAX调用。