码迷,mamicode.com
首页 > Web开发 > 详细

jquery的ajax提交时loading提示的处理方法

时间:2016-06-07 14:26:42      阅读:295      评论:0      收藏:0      [点我收藏+]

标签:

方法1:使用ajaxStart方法定义一个全局的“加载中。。。”提示 

$(function(){ 
    $("#loading").ajaxStart(function(){ 
        $(this).html("<img src=‘/jqueryStu/images/loading.gif‘ />"); 
      }); 
      $("#loading").ajaxSuccess(function(){ 
        $(this).html(""); 
        // $(this).empty(); // 或者直接清除 
      }); 

}); 

<div id="loading"></div> 

注意: 

所有的ajax提交都会触发ajaxStart事件,都会在你定义的 

<div id="loading"></div> 

位置上显示“加载中。。。”的图标(当然你也可以定义文字,但是一个加载中的图片比较好看); 

-------但是一定要注意,同时要定义好ajaxSuccess事件,ajax提交成功后把这个图标隐藏起来!!! 


特别提示: 

使用ajaxStart或ajaxSuccess事件时,相当于定义了一个全局的显示“加载中。。。”的位置,所有ajax提交时候“加载中。。。”的图标都始终显示在一个位置!!!! 

方法2:在ajax方法中定义任意位置显示的“加载中。。。”提示 

$(‘#ajax_test2‘).click(function(){ 
     $.ajax({ 
          url ---- url路径,根据你需要些啦, 
          type:‘post‘, 
          data:‘name=ZXCVB‘, 
          timeout:15000, 
          beforeSend:function(XMLHttpRequest){ 
              //alert(‘远程调用开始...‘); 
              $("#loading").html("<img src=‘/jqueryStu/images/loading.gif‘ />"); 
         }, 
         success:function(data,textStatus){ 
             alert(‘开始回调,状态文本值:‘+textStatus+‘ 返回数据:‘+data); 
             // $("#loading").empty(); 
           }, 
          complete:function(XMLHttpRequest,textStatus){ 
              // alert(‘远程调用成功,状态文本值:‘+textStatus); 
             $("#loading").empty(); 
           }, 
           error:function(XMLHttpRequest,textStatus,errorThrown){ 
              alert(‘error...状态文本值:‘+textStatus+" 异常信息:"+errorThrown); 
             $("#loading").empty(); 
          } 
       }); 
    }); 

<input type="button" id="ajax_test2" value="Ajax方式"> 
  <div id="loading"></div> 

很明显,在beforeSend时,在指定的位置显示“加载中。。。”图标,在error、complete、success后把该图标移除掉!!!! 

注意: 

页面有多个ajax提交时候,建议使用第二种方式,因为“加载中。。。”图标可以显示在任意你需要刷新的位置上!!!!!这就是它的优势:自由呀!!!! 

jquery的ajax提交时loading提示的处理方法

标签:

原文地址:http://www.cnblogs.com/shangxia/p/5566591.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!