JQ ajax全局事件 (個人學習筆記)
作用:當你的頁面存在很多ajax事件的話,我們有一些信息是公共的,可以復用,我們可以用全局事件進行編寫,因為每一個ajax事件調用,都會觸發ajax全局事件。
jquery的ajax方法的全部全局事件:
ajaxStart:ajax請求開始前
ajaxSend:ajax請求時
ajaxSuccess:ajax獲取數據後
ajaxError:ajax請求發生錯誤後
ajaxComplete:ajax請求完成時
ajaxStop:ajax請求停止後
不使用全局事件的做法是:給單個ajax加一個global:false;
1.ajaxStart
ajaxStart()方法:每當一個Ajax請求即將發送,jQuery檢查是否有任何其他響應過程中的Ajax請求(註:未完成的請求)。如果沒有檢查到,jQuery就會觸發ajaxStart
事件,在這個時間點所有處理函數都會使用.ajaxStart()
方法註冊並執行。如果global
選項設置為false
,調用$.ajax()
或$.ajaxStep()
方法將不會被觸發。
$(document).ajaxStart(function() { $( "#loading" ).show();//等待畫面 });
2.ajaxSend
.ajaxSend()方法:每當一個Ajax請求即將發送,jQuery就會觸發ajaxSend
.ajaxSend()
方法註冊並執行。如果global
選項設置為false
,調用$.ajax()
或$.ajaxStep()
方法將不會被觸發。
$(document).ajaxSend(function(event, request, settings) { $( "#msg" ).append( "<li>Starting request at " + settings.url + "</li>" ); });
3.ajaxSuccess
.ajaxSuccess()方法:每當一個Ajax請求成功完成,jQuery就會觸發ajaxSuccess
.ajaxSuccess()
方法註冊並執行。如果global
選項設置為false
,調用$.ajax()
或$.ajaxStep()
方法將不會被觸發。
$(document).ajaxSuccess(function(event, request, settings) { $( "#msg" ).append( "<li>Successful Request!</li>" ); });
4.ajaxError
.ajaxError()方法:每當一個Ajax請求出錯時,jQuery就會觸發ajaxError
事件,在這個時間點所有處理函數會使用.ajaxError()
方法註冊並執行。如果global
選項設置為false
,調用$.ajax()
或$.ajaxStep()
方法將不會被觸發。
$(document).ajaxError(function(event, request, settings) { $( "#msg" ).append( "<li>Error requesting page " + settings.url + "</li>" ); });
5.ajaxComplete
.ajaxComplete()方法:每當一個Ajax請求完成,jQuery就會觸發ajaxComplete
事件,在這個時間點所有處理函數會使用.ajaxComplete()
方法註冊並執行。如果global屬性被設置為false,當完成Ajax請求後不會調用這個方法。
$(document).ajaxComplete(function(event,request, settings) { $( "#msg" ).append( "<li>請求完成。</li>" ); });
6.ajaxStop
.ajaxStop()方法:每當一個Ajax請求完成,jQuery檢查是否有任何其他響應過程中的Ajax請求(註:未完成的請求)。如果都執行完成,jQuery就會觸發ajaxStop
事件,在這個時間點所有處理函數都會使用.ajaxStop()
方法註冊並執行。如果一個未處理完成的Ajax請求用beforeSend
回調函數返回false
取消,ajaxStop
事件也被觸發。如果global
選項設置為false
,調用$.ajax()
或$.ajaxStep()
方法將不會被觸發。
$(document).ajaxStop(function() { $( "#loading" ).hide(); });
JQ ajax全局事件 (個人學習筆記)