所有 ajax 请求完成后执行代码

我有一个相当复杂的搜索，它利用多个ajax调用，流程如下：

user performs search on button click
ajax request is made to php page which returns json data
    for each result in returned data additional ajax request is made
        run function which makes additional ajax call
    end for each
end click function

这一切都很好，我想做的是在 div 中显示加载消息并禁用搜索按钮，然后当所有 ajax 请求完成时重新启用按钮并删除加载消息。

我的脚本如下，目前按钮的禁用/重新启用几乎是瞬时发生的，我想因为ajax调用是异步的，一旦所有ajax请求完成，我该如何重新启用按钮并删除加载消息显示数据？？

$('#advKeyBtn').live('click', function() {
        $('#advKeyBtn').attr('disabled', 'disabled');
        $('#searchStatus').html('<img src="../img/icons/loadinfo.gif" width="16" height="16" /> Searching Locations...');
        $('#results').html(''); //clear existing contents
        $('#borough_links').html(''); //clear existing contents
        // handler for advance search button
        var myUrl = 'getKeyBoroughs.php';
        var myKeys = $('#keywords').val();
        var myType = $('input[name=keyParams]:checked').val()       
        $.ajax({
            url: myUrl,
            data: "keys=" + myKeys +'&type='+myType,
            type: "POST",
            traditional: false,
            dataType: 'json',
            error: function(xhr, statusText, errorThrown){
                // Work out what the error was and display the appropriate message
            },
            success: function(myData){
                // data retrived ok
                $.each(myData.boroughs, function( intIndex, objValue ){
                    //alert(myData.boroughs[intIndex].Borough_ID);
                    makeCSS(myData.boroughs[intIndex].Borough_ID);


    getKeyLocations(myData.boroughs[intIndex].Borough_ID)
                    })
                    //$('#'+divId).append(myData)//construct location holders
                }
            });
            $('#advKeyBtn').attr('disabled', '');
            $('#searchStatus').html('Search Complete, click on an area to view locations');
        });

以及从主 ajax 调用的初始成功中调用的函数

function getKeyLocations(id){
                    var myUrl = 'getKeyLocations.php';
                    var myBorough = id;
                    var myKeys = $('#keywords').val();
                    var myType = $('input[name=keyParams]:checked').val()   
                    var divId = '#borough_'+ id;
                    $.ajax({
                        url: myUrl,
                        type: 'POST',
                        data: 'borough_id='+myBorough+'&keys='+myKeys,
                        error: function(xhr, statusText, errorThrown){
                            // Work out what the error was and display the appropriate message
                        },
                        success: function(myData){
                            $(divId).html(myData);
                        }
                    });
                };

您必须创建一个函数来处理您的所有请求。当所有请求完成后，启用按钮并显示消息。

var ajaxLoading = {
        _requestsInProcess: 0,

        show: function () {
            if (this._requestsInProcess == 0) {
                $('#advKeyBtn').attr('disabled', 'disabled');
                $('#searchStatus').html('<img src="../img/icons/loadinfo.gif" width="16" height="16" /> Searching Locations...');
            }

            this._requestsInProcess++;
        },

        hide: function () {
            this._requestsInProcess--;
            if (this._requestsInProcess == 0) {
                $('#advKeyBtn').attr('disabled', '');
                $('#searchStatus').html('Search Complete, click on an area to view locations');
            }
        }
    };

现在，在所有 ajax 调用之前使用：

ajaxLoading.show()

在你所有的成功方法中使用：

ajaxLoading.hide()

希望这可以帮助。