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

Question

我正在使用jQuery和jQuery
UI。我体验到用户有时会多次触发ajax调用，因为触发调用的按钮/链接在单击后不会立即被禁用。为了防止这种情况的发生，现在我在“
beforeSend”操作中禁用按钮/链接。

这是典型的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调用中添加此按钮禁用逻辑。有什么办法全局定义每次在/ after和ajax-call之前都会被调用的函数吗？

Answer 1

有几种方法可以实现您的要求。它们之间的唯一区别是它们的实现方式，由您选择哪种方法最适合您的特定情况。方法还取决于您使用的jQuery版本，因此我将把答案分为两部分。

对于jQuery 1.5及更高版本

初始化后添加多个回调

从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还引入了预过滤器，可用于替换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对象进行相同类型的检查，也可以使用前面提到的方法来完成。