zoukankan      html  css  js  c++  java
  • jquery的ajax提交时loading提示的处理方法

    方法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提交时候,建议使用第二种方式,因为“加载中。。。”图标可以显示在任意你需要刷新的位置上!!!!!这就是它的优势:自由呀!!!! 

  • 相关阅读:
    ffmpeg+nginx+video实现rtsp流转hls流,通过H5查看监控视频
    视频支持拖动进度条播放的实现(基于nginx)
    nginx 点播mp4方法
    NGINX 添加MP4、FLV视频支持模块
    html5播放mp4视频代码
    ThreadPoolExecutor使用错误导致死锁
    Spring-Cloud-Gateway
    从0开始构建你的api网关--Spring Cloud Gateway网关实战及原理解析
    使用Consul做服务发现的若干姿势
    Consul 的安装与基本使用
  • 原文地址:https://www.cnblogs.com/shangxia/p/5566591.html
Copyright © 2011-2022 走看看