如何在每次ajax调用之前和之后触发某些操作

Question

我正在使用jQuery和jQuery UI.我经历过,用户有时会多次触发ajax调用,因为触发调用的按钮/ Link在单击后不会立即禁用.为了防止这种情况发生,我现在禁用我的"beforeSend"-action中的按钮/链接.

这就是典型的Ajax Call对我来说的样子:

   $.ajax({
      type: "POST",
      url: "someURL"
      data: "someDataString",
      beforeSend: function(msg){
        $(".button").button("disable");
      },
      success: function(msg){
        $(".button").button("enable");
        // some user Feedback
      }
    });

但我不想在每个Ajax调用中添加此按钮 - 禁用逻辑.是否有任何方法可以全局定义每次在before/after和ajax-call之间调用的函数？

Answer 1

有几种方法可以实现您的要求.它们之间的唯一区别在于它们的实现方式,您可以选择哪种方法最适合您的具体情况.这些方法还取决于您使用的jQuery版本,因此我将此答案分为两部分.

对于jQuery 1.5及更高版本

在init之后添加多个回调

从jQuery 1.5开始,由于经过大修的API和jqXHR返回的新引入的对象,您可以添加多个回调.ajax.它实现了Promise(参见Deferreds)界面,我们可以利用它来获得我们的优势:

// fn to handle button-toggling
var toggleButton = function() {
    var button = $(".button");
    button.button(button.button("option", "disabled") ? "enable" : "disable");
}

// store returned jqXHR object in a var so we can reference to it
var req = $.ajax({
    beforeSend: toggleButton,
    success: function(msg){
        /* Do what you want */
    }
}).success(toggleButton);

// we can add even more callbacks
req.success(function(){ ... });

使用预滤器

jQuery 1.5还引入了prefilters,您可以使用它来替换jQuery 1.4的全局配置:

// good practice: don't repeat yourself, especially selectors
var button = $(".button");

$.ajaxPrefilter(function(options, _, jqXHR) {
    button.button("disable");
    jqXHR.complete(function() {
        button.button("enable");
    });
});

注意:$ .ajax条目的jqXHR部分有关于使用的通知jqXHR.success():

弃用注意:自jQuery 1.8起,不推荐使用jqXHR.success(),jqXHR.error()和jqXHR.complete()回调.要准备最终删除的代码,请使用jqXHR.done(),jqXHR.fail()和jqXHR.always().

对于jQuery 1.4及更早版本

事件和全局配置

使用.ajaxStart和.ajaxStop将回调绑定到特定选择器.触发这些回调的事件将在所有Ajax请求中触发.

$(".button").ajaxStart(function(){
    $(this).button("disable");
}).ajaxStop(function(){
    $(this).button("enable");
});

使用.ajaxSetup设置一个全局AJAX配置.设置对象传递给.ajaxSetup将被应用到所有的Ajax请求,即使那些由速记制造.get,.getJSON和.post.请注意,建议不要这样做,因为它很容易破坏其功能.

$.ajaxSetup({
    beforeSend: function(){
        $(".button").button("disable");
    },
    success: function(){
        $(".button").button("enable");
    }
});

过滤掉全局事件回调中的请求

如果您需要过滤掉某些请求,可以使用.ajaxSend以及.ajaxComplete在哪里检查Ajax settings对象.像这样的东西:

var button = $(".button");

// fn to handle filtering and button-toggling
var toggleButton = function(settings) {
    if (settings.url == "/specific/url")
        button.button(button.button("option", "disabled") ?
            "enable" : "disable");
    }
};

// bind handlers to the callbacks
button.ajaxSend(function(e,x,settings){
    toggleButton(settings);
}).ajaxComplete(function(e,x,settings){
    toggleButton(settings);
});

这也可以通过对传递给回调处理程序.ajaxSetup的settings对象执行相同类型的检查来完成前面提到的.

Answer 2

要在全球注册它们,请使用

ajaxStart或ajaxSend事件

与...一起

ajaxComplete或ajaxStop事件

$(".button").ajaxStart(function(){
      $(this).attr("disabled","disabled");
});


$(".button").ajaxStop(function(){
      $(this).attr("disabled","");
});