小编典典

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

ajax

我正在使用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之前都会被调用的函数吗?


阅读 385

收藏
2020-07-26

共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);
});

通过对传递给回调处理程序.ajaxSetupsettings对象进行相同类型的检查,也可以使用前面提到的方法来完成。

2020-07-26