определить ajax-запрос jquery

Question

Я работаю с элементами управления asp, и у меня есть список выпадающих списков, которые в процессе выбора возвращаются на сервер и выполняют какое-либо действие (через asp ajax) , что я ищу, обнаруживает через jquery, когда вызов Ajax начинает Я попробовал следующий вызов:

$.ajaxSetup({ 
        beforeSend: function (jqXHR, settings) { 
         alert("ok"); 
         return false; 
        } 
       }); 

и

also $(document).ajaxStart(function() { 
        alert("OK"); 
       }); 

, но ничего из этого не работал

Answer 1

хорошо, если $(document).ajaxStart(function() {}); не работает для вас, попробовать сыровато JS,

var oldXHR = window.XMLHttpRequest; 

function newXHR() { 
    var realXHR = new oldXHR(); 
    realXHR.addEventListener("readystatechange", function() { 
     if(realXHR.readyState==1){ 
      alert('server connection established'); 
     } 
     if(realXHR.readyState==2){ 
      alert('request received'); 
     } 
     if(realXHR.readyState==3){ 
      alert('processing request'); 
     } 
     if(realXHR.readyState==4){ 
      alert('request finished and response is ready'); 
     } 
    }, false); 
    return realXHR; 
} 
window.XMLHttpRequest = newXHR; 

он должен предоставить вам все состояния запроса ajax и проверить, какой из них работает для вас, а затем вы можете удалить остальные условия if. вы можете разместить его за пределами $(document).ready(function(){});

Answer 2

Вы можете показать loader/waiting image в запросе ajax таким образом.

$('#loading-image').show(); 
$.ajax({ 
     url: uri, 
     cache: false, 
     success: function(html){ 
     $('.info').append(html); 
     }, 
     complete: function(){ 
     $('#loading-image').hide(); 
     } 
}); 

Если вы хотите связать global events как ajaxStart и ajaxStop.

$("#loading").bind("ajaxStart", function(){ 
    $(this).show(); 
}).bind("ajaxStop", function(){ 
    $(this).hide(); 
}); 

Answer 3

Это действительно не рекомендуется, но вы можете использовать .ajaxStart() и .ajaxComplete() обработчики:

$(document).ajaxStart(function() { 
    console.log('Ajax call started'); 
    $("#loading").show(); 
}); 
$(document).ajaxComplete(function() { 
    console.log('Ajax call completed'); 
    $("#loading").hide(); 
}); 

Важное примечание Начиная с JQuery 1.9, все обработчики для JQuery глобальной Ajax события должны быть прикреплены к document.

Имейте в виду, что если ваш Ajax вызова включает в себя global: false, запрос будет игнорировать глобальные конфигурации вызова по умолчанию (что также означает, что .ajaxStart() и .ajaxComplete() обратные вызовы не будут называться.

Если вы не хотите установить глобальные функции обратного вызова вы можете установить их специально для вызова Ajax вы делаете:

$.ajax({ 
    method: "GET", // or POST 
    url: "path", 
    .... 
    beforeSend: function() { 
     console.log('Ajax call started'); 
     $("#loading").show(); 
    }, 
    complete: function() { 
     console.log('Ajax call completed'); 
     $("#loading").hide(); 
    } 
});