如何前和每一个AJAX调用后火某种行动 [英] How to fire certain action before and after every ajax call

问题描述

我使用jQuery和jQuery UI。我经历过的用户有时会触发Ajax-调用不止一次，因为按钮/链接触发呼叫不是在他们点击残疾人的权利。为prevent，从发生的，我现在禁用我的beforeSend肌动按钮/链接。

I'm using jQuery and jQuery UI. I experienced that users sometimes fire the ajax-calls more than once, because the button/Link that triggers the call is not disabled right after they click it. To prevent that from happen, I now disable the button/link in my "beforeSend" -action.

这是一个典型的AJAX调用看起来像我：

This is what a typical Ajax Call looks like for me:

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

但我不WANN添加此按钮禁用逻辑在每一个AJAX调用。有没有什么办法来全局定义被调用每次函数前/后Ajax的电话吗？

But I dont wann to add this button-Disable logic in every Ajax Call. Is there any way to globally define a function that gets called everytime before /after and ajax-call?

推荐答案

有几种方法可以达到你所要求的。它们之间唯一的区别是它们是如何实现的，它是由你来选择哪一种方法为您的特定情况下，效果最好。该方法还取决于它的jQuery的版本，你都在用，所以我会分裂这个答案分为两个部分。

There are several ways to achieve what you are asking for. The only difference between them is how they are implemented, and it's up to you to choose which method works best for your specific case. The methods also depend on which version of jQuery you are using, so I will split this answer into two sections.

后添加多个回调的init

由于jQuery的1.5，你可以添加多个回调感谢去就API和新推出的 jqXHR 对象由阿贾克斯。它实现了承诺书（见 Deferreds 的）接口，我们可以用它来我们的优势

Since jQuery 1.5 you can add multiple callbacks thanks to the overhauled API and newly introduced jqXHR object that is returned by .ajax. It implement the Promise (see Deferreds) interface, and we can use that to our advantage:

// 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(){ ... });

使用prefilter

jQuery的1.5还引入了 prefilters ，你可以用它来替代的jQuery 1.4的全局配置：

jQuery 1.5 also introduced prefilters which you can use to replace the global configuration of 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");
    });
});

注： jqXHR的$就进入的部分有关于本通知使用 jqXHR.success（）：

Note: The jqXHR section of the $.ajax entry has this notice about using jqXHR.success():

德precation通知：jqXHR.success（），jqXHR.error（），和   jqXHR.complete（）回调pcated在jQuery 1.8代$ P $。为prepare   您的code为他们的最终消除，使用jqXHR.done（），jqXHR.fail（）   和jqXHR.always（）来代替。

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

活动和全球配置

使用 .ajaxStart 和<一HREF =htt​​p://api.jquery.com/ajaxStop/相对=nofollow> .ajaxStop 绑定回调到一个特定的选择。触发这些回调的事件会在所有Ajax请求火了。

Use .ajaxStart and .ajaxStop to bind callbacks to a specific selector. The events that trigger these callbacks will fire off on all Ajax requests.

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

使用 .ajaxSetup 以建立一个全球性的AJAX配置。设置对象传递给 .ajaxSetup 将被应用到所有的Ajax请求，甚至那些由速记发。获得， .getJSON 和。员额。请注意，这是不推荐，因为它可以很容易地揍它的功能。

Use .ajaxSetup to setup a global ajax configuration. The settings object passed to .ajaxSetup will be applied to all Ajax requests, even those made by the shorthands .get, .getJSON and .post. Note that this isn't recommended since it can easily clobber its functionality.

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

过滤器在全球的事件回调请求

如果您需要过滤掉某些请求，你可以做到这一点与 .ajaxSend 和 .ajaxComplete <$ / A>在这里你可以查看阿贾克斯设置对象。事情是这样的：

If you need to filter out certain requests you can do that with.ajaxSend and .ajaxComplete where you can check the Ajax settings object. Something like this:

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

这也可以与pviously提到的$ P $ .ajaxSetup 做同一类型的检查，以设置对象传递给回调处理程序。

This can also be done with the previously mentioned .ajaxSetup by doing the same type of checks to the settings object that is passed to the callback handlers.

这篇关于如何前和每一个AJAX调用后火某种行动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！