https://www.cnblogs.com/yangjinwang/p/6513529.html
https://www.cnblogs.com/SongHuiJuan/p/8117890.html
https://blog.csdn.net/woshiwxw765/article/details/22393619
jquery ajax 中各個事件執行順序如下:
1.ajaxStart(全局事件)
2.beforeSend
3.ajaxSend(全局事件)
4.success
5.ajaxSuccess(全局事件)
6.error
7.ajaxError (全局事件)
8.complete
9.ajaxComplete(全局事件)
10.ajaxStop(全局事件)
下面看個例子:
$("#ACCOUNT_TYPE").bind('click', function() { //alert( $(this).val()); var msg=""; if($(this).val()=="B134002")//托管 { //msg="托管"; msg="ACCOUNT_TYPE_COM_T"; } else if($(this).val()=="B134001")//存管 { //msg="存管"; msg="ACCOUNT_TYPE_COM_C"; } else if($(this).val()=="-")//存管和托管all { //msg="存管和托管"; msg="ACCOUNT_TYPE_COM_ALL"; } else { alert("參數錯誤!"); return; } $("#ACCOUNT_TYPE_COMDiv_son").children().remove();//先清除所有子元素 $.ajax({ type:"post", url:"${ctx}/Rule/Combination/getdict", data:{type:msg}, dataType:"json", success:function(json) { //$(object).children(selector).remove(); // 刪除object元素下滿足selector選擇器的子元素,不填寫則默認刪除所有子元素 for(var i=0;i<json.length;i++) { var checkBox=document.createElement("input"); //checkBox.setAttribute("type","checkbox"); checkBox.setAttribute("type","radio"); checkBox.setAttribute("id", json[i].value); checkBox.setAttribute("value", json[i].value); checkBox.setAttribute("name", "ACCOUNT_TYPE_COM"); checkBox.setAttribute("checked", true); //checkBox.setAttribute("readonly", true);// var li=document.createElement("span"); li.style.display = "block"; li.style.width = 23+"%"; li.style.float = "left"; li.appendChild(checkBox); li.appendChild(document.createTextNode(json[i].label)); $("#ACCOUNT_TYPE_COMDiv_son").append(li); } } , beforeSend:function(mes) { alert("beforeSend"); }, complete:function() { alert("complete"); } }); });
運行這段代碼,會先彈出 beforeSend 提示,然后加載success 方法里面的代碼,最后彈出 complete 提示,這說明這段代碼的幾個方法的執行先后順序是符合上面總結的順序的!
全局事件的例子:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").ajaxStart(function(){ $(this).html("<img src='/i/demo_wait.gif' />"); alert("1.最先的全局方法"); }); $("button").click(function(){ $("div").load("/example/jquery/demo_ajax_load.asp"); }); $("div").ajaxSend(function() { alert("2.發送前"); }); $("div").ajaxSuccess(function() { alert("3.成功后"); }); $("div").ajaxComplete(function() { alert("4.ajaxComplete"); }); $("div").ajaxStop(function() { alert("5.ajaxStop"); }); }); </script> </head> <body> <div id="txt"><h2>通過 AJAX 改變文本</h2></div> <button>改變內容</button> </body> </html>
每次點擊 "改變內容" 的這個按鈕,都會先加載一次demo_wait.gif 這個圖片,然后執行 ajaxSend,然后執行 ajaxSuccess,然后執行ajaxComplete,然后執行 ajaxStop ,這個執行順序也是符合上面總結的順序的!
____________________________________________________________________________________
一、.ajaxStart()——ajax請求開始時觸發
描述:ajax請求開始時觸發 .ajaxStart()的回調函數,全局的,所有的ajax都可以用
寫法:元素.ajaxStart(function({ajax請求開始時觸發的代碼})
$("#loading").ajaxStart(function () { $(this).show(); //ajax請求開始時#loading元素顯示 });
作用域:全局
某個ajax不受全局方法的影響:
方法:將$.ajax({})的global設為false
$.ajax({ url: "test.html", global:false });
二、.ajaxStop()——ajax請求結束時觸發
描述:ajax請求結束時觸發 .ajaxStop()的回調函數,全局的,所有的ajax都可以用
寫法:元素.ajaxStop(function({ajax請求結束時觸發的代碼})
$("#loading").ajaxStop(function () { $(this).hide(); //ajax請求結束時#loading元素隱藏 });
作用域:全局
某個ajax不受全局方法的影響:
方法:將$.ajax({})的global設為false
$.ajax({ url: "test.html", global:false });