方法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提交时“加载中”提示的处理方法的更多相关文章

  1. [转]jquery的ajax交付时“加载中”提示的处理方法

    本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时“加载中”提示的处理方法    方法1:使用ajaxStart方法定义一个全局的“加 ...

  2. jquery的ajax提交时加载处理方法

    1.定义全局的,就是所有的ajax的请求的加载都会出现相同的提示 $(function(){ //加载成功显示的状态 $("#showLoading").ajaxSuccess(f ...

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

    方法1:使用ajaxStart方法定义一个全局的“加载中...”提示 $(function(){     $("#loading").ajaxStart(function(){   ...

  4. IOS 加载中提示框

    LoadingView.h #import <Foundation/Foundation.h> @class MBProgressHUD; @interface LoadingView : ...

  5. jquery mobile 请求数据方法执行时显示加载中提示框

    在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...

  6. JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  7. 只要发生ajax请求时加载旋转的按钮

    定义一个变量 全局 c 只要发生ajax时给c++ 当ajax请求success或者error时,c--; 对加载的按钮添加个事件   监听 c  如果c得值没变化  则隐藏按钮   如果变化了则显示 ...

  8. 微信小程序之----加载中提示框loading

    loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... ...

  9. jquery mobile转场时加载js失效(转)

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...

随机推荐

  1. 开始bootstrap的学习

    终于过完双十一,服务器顶住了压力,不知道为啥,突然的轻松,反而感觉有点无所适从,好久没写博客了,竟然发现还有人回我,很是开心,问题都是关于阿里云的,阿里云的吭确实多,其实关键在于,官方文档还是少,出了 ...

  2. Java练习题01

    问题: 利用二维非矩阵数组输出下面的数字 0 1 2 2 3 4 3 4 5 6 代码: public class Page98{     public static void main(String ...

  3. Redis学习笔记(四)集合进阶

    1.组合与关联多个集合 差集: SDIFF key1 [key2...](返回存在于key1但不存在其他集合中的元素) SDIFFSTORE destination key1 [key2...](将存 ...

  4. [Python學習筆記] 利用 Python在Excel 插入註解

    用Python 來處理excel 檔 用過了 openpyxl 還有 pyexcel目前覺得除了讀寫如果還要使用另外的功能 (像是讀取格子裡的公式)可以用 xlwings  他的首頁標題 " ...

  5. SQLite -创建数据库

    SQLite -创建数据库 SQLite sqlite3命令用于创建新的SQLite数据库.你不需要有任何特权来创建一个数据库. 语法: sqlite3命令的基本语法如下: $sqlite3 Data ...

  6. nginx 1.15.10 前端代理转发 将多个地址,代理转发到一个地址和端口 多系统公用一个cookie 统一token

    nginx 1.15.10 前端代理转发 将多个地址,代理转发到一个地址和端口 多系统公用一个cookie 统一token 注意: proxy_pass http://192.168.40.54:22 ...

  7. vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit

    vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit

  8. List<T>排序

    List<Student> studentList = new List<Student>(); Student s = new Student(); s.Name = &qu ...

  9. 洛谷 P1518 两只塔姆沃斯牛

    P1518 两只塔姆沃斯牛 The Tamworth Two 简单的模拟题,代码量不大. 他们走的路线取决于障碍物,可以把边界也看成障碍物,遇到就转,枚举次,因为100 * 100 * 4,只有4个可 ...

  10. 9. InnoDB通用表空间

    9. InnoDB通用表空间 通用表空间是InnoDB 使用CREATE TABLESPACE语法创建的共享表空间.本节中的以下主题描述了常规表空间功能和功能: 通用表空间功能 创建通用表空间 将表添 ...