Jquery 在具有多个AJAX调用的语句中插入AJAX加载指示符

在具有多个AJAX调用的语句中插入AJAX加载指示器的最佳方法是什么

例如：

$("#search_building").on("change blur", function () {
    var building = $("#search_building").val();
    var room = $("#search_room").val();
    var dept = $("#dept").val();
    var dataString = 'room=' + room + '&' + 'building=' + building + '&' + 'dept=' + dept;
    $.ajax({
        type: "POST",
        url: "process_building.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $('#search_room').html(html);
        }
    });
    $.ajax({
        type: "POST",
        url: "process_timetableMon.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $('#grid2_mon').html(html);
        }
    });
         $.ajax({
        type: "POST",
        url: "process_timetableTue.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $('#grid2_tue').html(html);
        }
    });
        $.ajax({
        type: "POST",
        url: "process_timetableWed.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $('#grid2_wed').html(html);
        }
    });
        $.ajax({
        type: "POST",
        url: "process_timetableFri.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $('#grid2_wed').html(html);
        }
    });
        $.ajax({
        type: "POST",
        url: "process_roomList.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $('#list2').html(html);
        }
    });
        }); 

---

您可以使用计数器来记录正在进行的AJAX请求的数量。当计数器>1时，显示加载指示器。每次收到响应时，递减1。当计数器达到0时，隐藏加载指示器。

您可以在

$.ajax（）调用中这样使用它：

$.ajaxSetup({
    beforeSend:function(){
        // show image here
        $("#busy").show();
    },
    complete:function(){
        // hide image here
        $("#busy").hide();
    }
});

从我的：

随着代码库越来越难阅读和维护，使用计数器和其他不合标准的方法将鼓励代码功能失调。实现这一点的理想方法是使用事件驱动的方法。它更易于维护，并减少了今后的意大利面代码。您可以轻松实现如下内容：

//First, we need an object that will contain our 'event domain'
var EventDomain = new function(config,callback){

this.__listeners = {}; //this will store references to functions associated to events

this.on = function(event,listener){ //here, we provide a member that binds 
                                    //a 'listener' function to an event string
    if (typeof this.__listeners[event] == "undefined"){
        this.__listeners[event] = [];
    }
    this.__listeners[event].push(listener);
};
this.emit = function(event,params){ //here, we provide a member that 'emits' an
                                    //event string, calling any 'listener' functions
                                    //and passing a parameter object 
                                    //{param1: val1, param2:val2, paramN, valN} 
    if(typeof event == "string"){
        event = { type: event };
    }
    if(!event.target){
        event.target = this;
    }

    if(!event.type){
        throw new Error("Event object missing 'type' property.");
    }
    if(this.__listeners[event.type] instanceof Array){
        var listeners = this.__listeners[event.type];
        for (var i=0, len=listeners.length; i < len; i++){
            listeners[i](params);
        }
    }
};
this.removeListener = function(type, listener){ //here, we provide a member that allows
                                                //us to remove a 'listener' function 
                                                //from an event
    if(this.__listeners[type] instanceof Array){
        var listeners = this.__listeners[type];
        for (var i=0, len=listeners.length; i < len; i++){
            if (listeners[i] === listener){
                listeners.splice(i, 1);
                break;
            }
        }
    }
};
this.removeAllListeners = function(type){ //here, we provide a member that allows
                                          //us to remove ALL 'listener' functions
                                          //from an event
    if(this.__listeners[type] instanceof Array){
        delete this.__listeners[type];
    }
};
};

现在，它只起作用了：

$("#search_building").on("change blur", function () {

var building = $("#search_building").val();
var room = $("#search_room").val();
var dept = $("#dept").val();
var dataString = 'room=' + room + '&' + 'building=' + building + '&' + 'dept=' + dept;
$.ajax({
    type: "POST",
    url: "process_building.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#search_room').html(html);
    }
});
$.ajax({
    type: "POST",
    url: "process_timetableMon.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#grid2_mon').html(html);
    }
});
     $.ajax({
    type: "POST",
    url: "process_timetableTue.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#grid2_tue').html(html);
    }
});
    $.ajax({
    type: "POST",
    url: "process_timetableWed.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#grid2_wed').html(html);
    }
});
    $.ajax({
    type: "POST",
    url: "process_timetableFri.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#grid2_wed').html(html);
    }
});
    $.ajax({
    type: "POST",
    url: "process_roomList.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#list2').html(html);
    }
});
    }); 

将事件驱动编程与面向对象编程结合在一起的巨大好处
前端是你最终解放你的开发者去做更多的实际内容创建和更少的问题解决。创建一个可重用的框架一开始需要更多的时间，但在以后的过程中会有指数级的时间/质量效益。如果你想得到更多的帮助
有了这些概念，请随时向我发送电子邮件：rhyneandrew@gmail.com.
我非常乐意免费帮助你；）
 您希望ajax请求仅在前一个请求完成后启动？@Teddy no-很抱歉误解。我希望加载图标显示在成功目标div/select中/etc@coder的ajaxSetup将是一个很好的解决方案。但在这种情况下，最好包括一个计数器，否则当任何一个请求完成时，指示器将隐藏。谢谢您的回复！我如何将其合并到上述代码中？我很想看一个例子：-）这是一个你想要的例子
AjaxController.onLoad(function(){
   //put some code here to do DOM manipulation to add a loader, or however you
   //want to 'indicate' ajax loading
});

AjaxController.onComplete(function(){
   //put some code here to do some DOM manipulation to remove your loader, or however
   //you want to 'indicate' that ajax loading is complete
});

$("#search_building").on("change blur", function () {

var building = $("#search_building").val();
var room = $("#search_room").val();
var dept = $("#dept").val();
var dataString = 'room=' + room + '&' + 'building=' + building + '&' + 'dept=' + dept;
$.ajax({
    type: "POST",
    url: "process_building.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#search_room').html(html);
    }
});
$.ajax({
    type: "POST",
    url: "process_timetableMon.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#grid2_mon').html(html);
    }
});
     $.ajax({
    type: "POST",
    url: "process_timetableTue.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#grid2_tue').html(html);
    }
});
    $.ajax({
    type: "POST",
    url: "process_timetableWed.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#grid2_wed').html(html);
    }
});
    $.ajax({
    type: "POST",
    url: "process_timetableFri.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#grid2_wed').html(html);
    }
});
    $.ajax({
    type: "POST",
    url: "process_roomList.php",
    data: dataString,
    cache: false,
    success: function (html) {
        $('#list2').html(html);
    }
});
    });