jquery ajax 中各個事件執行順序


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
});

 

 
_______________________________________________________________________

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM