欢迎来到知了堂!
联系电话:知了堂-电话号码 028-62016472

Ajax加载中显示loading的方法-知了堂

Ajax加载中显示loading的方法

  使用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提交成功后把这个图标隐藏起来!!!

Ajax加载中显示loading的方法

 
  在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提交时候,建议使用第二种方式,因为“加载中。。。”图标可以显示在任意你需要刷新的位置上!
 
  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习web前端开发时使用