When there are many ajax events on your page, we have some information that is public and can be reused. We can use global events to write, because every ajax event call will trigger ajax global events.
All global events of jquery's ajax method:
ajaxStart: before the ajax request starts
ajaxSend: when ajax request
ajaxSuccess: after ajax gets data
ajaxError: After an error occurs in the ajax request
ajaxComplete: when the ajax request is complete
ajaxStop: after the ajax request stops
The way to not use global events is: add a global: false to a single ajax;
1.ajaxStart
ajaxStart() method: Whenever an Ajax request is about to be sent, jQuery checks whether there are any other Ajax requests in the process of responding (note: outstanding requests). If it is not checked, jQuery will trigger ajaxStartthe event, at which point all handlers will be registered with .ajaxStart()the method and executed. If globalthe option is set to false, the call $.ajax()or $.ajaxStep()method will not be triggered.
$(document).ajaxStart(function() {
$( "#loading" ).show();//等待画面
});2.ajaxSend
.ajaxSend() method: Whenever an Ajax request is about to be sent, jQuery will trigger ajaxSendan event. At this point in time, all processing functions will be .ajaxSend()registered and executed using the method. If globalthe option is set to false, the call $.ajax()or $.ajaxStep()method will not be triggered.
$(document).ajaxSend(function(event, request, settings) {
$( "#msg" ).append( "<li>Starting request at " + settings.url + "</li>" );
});3.ajaxSuccess
.ajaxSuccess() method: Whenever an Ajax request is successfully completed, jQuery will trigger ajaxSuccessan event. At this point in time, all processing functions will be .ajaxSuccess()registered and executed using the method. If globalthe option is set to false, the call $.ajax()or $.ajaxStep()method will not be triggered.
$(document).ajaxSuccess(function(event, request, settings) {
$( "#msg" ).append( "<li>Successful Request!</li>" );
});4.ajaxError
.ajaxError() method: Whenever an Ajax request fails, jQuery will trigger ajaxErroran event. At this point in time, all processing functions will be .ajaxError()registered and executed using the method. If globalthe option is set to false, the call $.ajax()or $.ajaxStep()method will not be triggered.
$(document).ajaxError(function(event, request, settings) {
$( "#msg" ).append( "<li>Error requesting page " + settings.url + "</li>" );
});5.ajaxComplete
.ajaxComplete() method: Whenever an Ajax request is completed, jQuery will trigger ajaxCompletean event. At this point in time, all processing functions will be .ajaxComplete()registered and executed using the method. If the global property is set to false, this method will not be called when the Ajax request is completed.
$(document).ajaxComplete(function(event,request, settings) {
$( "#msg" ).append( "<li>请求完成。</li>" );
}); 6.ajaxStop
.ajaxStop() method: Whenever an Ajax request completes, jQuery checks to see if there are any other Ajax requests in the process of responding (note: outstanding requests). If all execution is completed, jQuery will trigger ajaxStopan event, and at this point in time all processing functions will be .ajaxStop()registered and executed using the method. The event is also fired if an outstanding Ajax request is canceled with beforeSenda callback function return . If the option is set to , the call or method will not be triggered.falseajaxStopglobalfalse$.ajax()$.ajaxStep()
$(document).ajaxStop(function() {
$( "#loading" ).hide();
});