Как запустить определенное действие до и после каждого вызова 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. Есть ли способ глобально определить функцию, которая вызывается каждый раз до / после и 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(){ ... });

Использование префильтра

jQuery1.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");
    });
});

Примечание. В разделе jqXHR записи $ .ajax естьэто уведомление об использовании jqXHR.success():

Примечание об устаревании: обратные вызовы jqXHR.success (), jqXHR.error () и jqXHR.complete () устарели с версии jQuery 1.8.Чтобы подготовить ваш код для их возможного удаления, используйте взамен 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","");
});

Answer 3

Да, вы можете установить значения по умолчанию для всех вызовов ajax, вызывая эту функцию для каждой страницы: http://api.jquery.com/jQuery.ajaxSetup/

Кроме того, если есть вызов ajax, который вы не хотите использовать по умолчанию, топросто определите эту опцию для этого конкретного вызова ajax.

Answer 4

Вы можете попытаться привязать обработчик событий к событию отправки и вызывать действие каждый раз, когда вызывается действие отправки.Читайте об этом здесь .В противном случае AjaxSetup является еще одним хорошим способом сделать трюк.