Как узнать, есть ли запрос Ajax и успех Ajax

Question

Интересно, как я могу кодировать это

//if there is any ajax request
   $("#loader").css("display","block");
//on success:
    $("#loader").css("display","none");

Примечание: Я не собираюсь кодировать его снова и снова в каждой функции запроса ajax.Я хочу это Genric.чтобы мой сценарий знал, существует ли какой-либо ajax-запрос, выполните $("#loader").css("display","block");, и если есть какой-либо успех ajax, выполните $("#loader").css("display","none");

Answer 1

Волшебная вещь, которую вы ищете, это jQuery.ajaxStart () и jQuery.ajaxStop () .Вы также можете найти jQuery.ajaxComplete () полезным.

Пример:

$("#loader").ajaxStart(function() {
   $(this).show();
}).ajaxStop(function() {
   $(this).hide();
});

Вы должны использовать методы hide() и show() вместо измененияdisplay Атрибут CSS.

Answer 2

Посмотрите на $.ajaxStart и $.ajaxEnd, когда вы подключите свое приложение в $ .document (готово):

$.ajaxStart(function(){
  $("#loader").css("display", "block");
})
.ajaxStop(function(){
  $("#loader").css("display", "none");
});

ОБНОВЛЕНИЕ забыл про ajaxStop ... @ Ответ Кори напомнил мне.Обновил мой ответ.

Answer 3

Эти другие решения хороши, но я не уверен, что они решают вашу проблему с вызовом ваших $("#loader") изменений CSS при start и success .

Может быть что-то вроде этого:

$(document).ajaxStart(function() {

  // do something on start
  $("#loader").css("display","block");

}).ajaxError(function(e, xhr, settings) {
  // do something on error
  $("#loader").css("display","none");

}).ajaxSuccess(function() {

  // do something on success
  $("#loader").css("display","block");

});

Проверьте этот правильно работающий пример: http://jsbin.com/ocovoq/3/edit#preview

Answer 4

Если вы отключите два или три ajax-вызова, ajaxStop сработает только тогда, когда последний будет сделан.