ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。

例如，在调用ajax()方法请求服务器数据前，使用动画显示正在加载中，当请求成功后，该动画自动隐藏，如下图所示：

在浏览器中显示的效果：

从图中可以看出，由于使用ajaxStart()和ajaxStop()方法绑定了动画元素，因此，在开始发送Ajax请求时，元素显示，请求完成时，动画元素自动隐藏。

注意：该方法在1.8.2下使用是正常的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用ajaxStart()和ajaxStop()方法</title>
        <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
   
    <body>
        <div id="divtest">
            <div class="title">
                <span class="fl">加载一段文字</span>
                <span class="fr">
                    <input id="btnShow" type="button" value="加载" />
                </span>
            </div>
            <ul>
               <li id="divload"></li>
            </ul>
        </div>
       
        <script type="text/javascript">
            $(function () {
                $("#divload").ajaxStart(function(){
                    $(this).html("正在请求数据...");
                });
                $("#divload").ajaxStop(function(){
                    $(this).html("数据请求完成！");
                });
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.ajax({
                        url: "http://www.imooc.com/data/info_f.php",
                        dataType: "json",
                        success: function (data) {
                            $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                        }
                    });
                })
            });
        </script>
    </body>
</html>

jQuery使用ajaxStart()和ajaxStop()方法的更多相关文章

  1. Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现

    Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...

  2. ajaxStart()和ajaxStop()方法

    使用ajaxSetup()方法设置全局Ajax默认选项 使用ajaxSetup()方法可以设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值,它的调用格式为: ...

  3. ajaxStart()和ajaxStop()

    Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...

  4. 【锋利的jQuery】中全局事件ajaxStart、ajaxStop不执行

    最近一直都在研究[锋利的jQuery],确实是一本好书,受益匪浅.但由于技术发展及版本更新等原因,里面还是有些坑需要踩的. 比如:第六章七节中提到的全局事件ajaxStart.ajaxStop照着案例 ...

  5. jQuery Ajax实例各种使用方法详解

    在jquery中ajax实现方法分类很多种,如有:load.jQuery.get.jQuery.post.jQuery.getScript.jQuery Ajax 事件.jQuery.ajaxSetu ...

  6. Jquery中和ajax有关的方法

    Jquery关于ajax有一系列的方法函数,单单知道$.ajax()显然是不够的,接下来我们对该系列的方法函数逐一研究下. ajaxComplete(callback).ajaxError(callb ...

  7. JQuery的核心的一些方法[扒来的]

    JQuery的核心的一些方法 each(callback) '就像循环 $("Element").length; ‘元素的个数,是个属性 $("Element" ...

  8. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  9. JQuery中each()的使用方法说明

    JQuery中each()的使用方法说明 对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话说:jQuery提供的eac ...

随机推荐

  1. adb使用

    一.使用adb删除系统应用,如Launcher.apk adb root                 获取root权限 adb remount          挂载系统的读写权限 adb she ...

  2. 配置新系统（Win7 x64）

    新装了一个Win7 x64系统.总结了一些系统配置需要注意的地方. 1. C盘空间 发现C盘被用去了50G的空间,在什么软件都没装的情况下,被用去这么多,感到不可思议. 打开控制面板->文件夹选 ...

  3. 精选19款华丽的HTML5动画和实用案例

    下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...

  4. Second Day learning English

    Today I have set my Microsoft word program, use it send documents to the blog site.

  5. [LeetCode] Range Sum Query - Immutable

    The idea is fairly straightforward: create an array accu that stores the accumulated sum fornums suc ...

  6. csv大文件分割以及添加表头

    注:这里说的大文件也不是太大,只有60多M而已(70多万条数据),相对比较大而已. 为了减轻编辑的工作,某种情况下网站上可能用会到csv格式的文件进行数据导入,但一般网站除了有上传文件大小限制以外,还 ...

  7. UITableViewCell分割线左边部分缺少一些的解决方法

    -(void)viewDidLayoutSubviews {        if ([self.mytableview respondsToSelector:@selector(setSeparato ...

  8. 【PRML读书笔记-Chapter1-Introduction】1.1 Example:Polynomial Curve Fitting

    书中给出了一个典型的曲线拟合的例子,给定一定量的x以及对应的t值,要你判断新的x对应的t值多少. 任务就是要我们去发现潜在的曲线方程:sin(2πx) 这时就需要概率论的帮忙,对于这种不确定给t赋何值 ...

  9. 【软件分析与挖掘】Vision of Software Clone Management: Past, Present, and Future (Keynote Paper)

    abstract: 代码克隆的综述 S1    INTRODUCTION AND MOTIVATION 代码克隆的利弊: 利:可以有效地去耦合,避免其他一些可能的错误: 弊:当被复制的那段code中带 ...

  10. 【cs229-Lecture17】离散与维数灾难

    主要内容: 解决MDP问题的算法: 离散化: 模型MDP的同化型: (model/similator) 拟合值迭代算法: Q函数: 近似政策迭代: 笔记转自:http://blog.csdn.net/ ...