zoukankan      html  css  js  c++  java
  • jquery ajax 中各个事件执行顺序

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

     
  • 相关阅读:
    设置Centos7会话超时时间
    Shell浮点运算
    Maven 同一依赖多版本共存
    Java根据模板生成word
    Java条形码生成
    arcgis for js 4.x 悬浮显示popup
    tomcat 跨域配置
    Mysql8.0 版本 timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',报错
    volatile
    synchronized
  • 原文地址:https://www.cnblogs.com/yangjinwang/p/6513529.html
Copyright © 2011-2022 走看看