Как активировать определенные действия до и после каждого вызова ajax

Я использую jQuery и jQuery UI. Я испытал, что пользователи иногда запускают ajax-вызовы более одного раза, потому что кнопка/ссылка, которая запускает вызов, не отключается сразу после их нажатия. Чтобы этого не случилось, я теперь отключил кнопку/ссылку в моем "beforeSend" -action.

Вот как выглядит обычный Ajax-вызов для меня:

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

Но я не хочу добавлять эту кнопку. Отключите логику в каждом вызове Ajax. Есть ли способ глобально определить функцию, которая вызывается каждый раз до/после и ajax-вызов?

Ответ 1

Существует несколько способов добиться того, что вы просите. Единственная разница между ними заключается в том, как они реализованы, и вам решать, какой метод лучше всего подходит для вашего конкретного случая. Методы также зависят от того, какую версию jQuery вы используете, поэтому я разберу этот ответ на два раздела.

Для jQuery 1.5 и более поздних версий

Добавление нескольких обратных вызовов после init

С jQuery 1.5 вы можете добавить несколько обратных вызовов благодаря обновленному API и недавно представленному объекту jqXHR, который возвращается .ajax. Он реализует интерфейс Promise (см. Отсрочки), и мы можем использовать это в наших интересах:

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

Примечание. Раздел 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, который передается обработчикам обратного вызова.

Ответ 2

Чтобы зарегистрировать их глобально, используйте

ajaxStart или ajaxSend events

вместе с

ajaxComplete или ajaxStop event

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


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

Ответ 3

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

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

Ответ 4

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