Question

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

添加第一个客户时，应显示“已添加10个”中的“1”。添加第二个客户时，应显示“添加10个”中的2个。等等。

但是，以下功能仅显示最后一条消息“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);
            }           
        }
    });
}

Answer 1

使用.append（）

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

Answer 2

根据 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);
            }    
        }
    });    
}

带有同步消息的循环中的多个AJAX请求

2 个答案: