jquery ajax 中各个事件执行顺序

时间 2019-12-13

标签 jquery ajax 各个事件执行顺序栏目 JQuery 繁體版

原文原文链接

http://www.javashuo.com/article/p-mbsafezq-dx.html

http://www.javashuo.com/article/p-sxevepkw-dg.htmljavascript

https://blog.csdn.net/woshiwxw765/article/details/22393619html

jquery ajax 中各个事件执行顺序以下：

1.ajaxStart(全局事件)java

2.beforeSendjquery

3.ajaxSend(全局事件)ajax

4.successjson

5.ajaxSuccess(全局事件)app

6.erroride

7.ajaxError (全局事件)函数

8.completepost

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 ，这个执行顺序也是符合上面总结的顺序的！

____________________________________________________________________________________

1、.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
});

2、.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
});

_______________________________________________________________________