多个AJAX请求在一个带有同步消息的循环中 - Multiple AJAX request in a loop with synchronized message

Multiple AJAX request in a loop with synchronized message

使用jQuery通过循环添加10个客户需要AJAX请求。

当添加第一个客户时，它应该显示"添加了10个客户中的1个"。当添加第二个客户时，它应该显示"2 of 10 added"。等等。

但是，下面的函数只显示最后一条消息"10 of 10 added"，并且在添加这10个客户时浏览器一直很忙。

function addCustomer(total) 
{
    var addedIndex = parseInt($("#added-index").val());
    $.ajaxSetup({cache : false});
    $.ajax({
        type: "POST",
        url: "add_customer.php",
        data: "added_no=" + document.getElementById("added-index").value,
        global: false,
        async: false,
        cache: false,
        success: function(html){
            $("#added-index").val(addedIndex + 1);
            addedIndex = parseInt($("#added-index").val());
            if (addedIndex < total) {
                addCustomer(total);
            }
            else {
                $("#cc-msg").html(html);
            }           
        }
    });
}

使用。append()

$("#cc-msg").append(html + '<img src="img/ajax_loader.gif" width="35" hspace="150" height="35" vspace="7" align="middle" >');

根据Anthony Grist的评论，这个AJAX请求不应该有async: false参数。所以，答案是:

function addCustomer(total) 
{
    var addedIndex = parseInt($("#added-index").val());
    $.ajaxSetup({cache : false});
    $.ajax({
        type: "POST",
        url: "add_cc.php",
        data: "added_no=" + document.getElementById("added-index").value,
        global: false,
        cache: false,
        success: function(html){
            $("#added-index").val(addedIndex + 1);
            addedIndex = parseInt($("#added-index").val());
            if (addedIndex < total) {
                addCustomer(total);
            }
            else {
                $("#cc-msg").html(html);
            }    
        }
    });    
}