jquery ajax 中各個事件執行順序

時間 2019-12-14

標籤 jquery ajax 各個事件執行順序欄目 JQuery 简体版

原文原文鏈接

jquery ajax 中各個事件執行順序以下：

1.ajaxStart(全局事件)javascript

2.beforeSendhtml

3.ajaxSend(全局事件)java

4.successjquery

5.ajaxSuccess(全局事件)ajax

6.errorjson

7.ajaxError (全局事件)app

8.completepost

9.ajaxComplete(全局事件)this

10.ajaxStop(全局事件)url

下面看個例子：

 $("#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>