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. mac os x 安装mysql遇到 Access denied for user 'root'@'localhost' (using password: YES)的解决方法

    最近把开发环境迁移到macbook上,装上mysql启动之后,连接,总是报这个错误.5.5的版本默认密码为空.其实这个错误是root未授权的问题.解决方法如下: 未给localhost root用户授 ...

  2. Mac mongodb 配置安装

    简单总结就几条,比较简单配置mongodb. 1,首先下载安装包:百度云下载地址 2,下载之后解压到自己常放的工作目录下,然后开始配置一下你的Mac环境 vim ~/.bash_profile 添加m ...

  3. 基本的文件 I/O

    基本的文件 I/O MSDN 抽象基类 Stream 支持读取和写入字节.Stream 集成了异步支持.其默认实现根据其相应的异步方法来定义同步读取和写入,反之亦然. 所有表示流的类都是从 Strea ...

  4. 机器学习(Machine Learning)&深度学习(Deep Learning)资料

    <Brief History of Machine Learning> 介绍:这是一篇介绍机器学习历史的文章,介绍很全面,从感知机.神经网络.决策树.SVM.Adaboost到随机森林.D ...

  5. Git简记

    1. 如何在GitHub上下载资源? 有2种方法: (1)直接在WebBrowser中下载. 比如要下载 https://github.com/numbbbbb/progit-zh-pdf-epub- ...

  6. css3实现进度条的模拟

    两种进度条动画的实现: 1.css3,但IE9-不支持. 2.js动画,兼容性好,但没有css3实现的顺畅 Demo: <html>    <head>        < ...

  7. Untracked files不想add

    $ git status On branch feature/20160420_complain_630222 Untracked files: (use "git add <file ...

  8. ODAC （V9.5.15) 学习笔记（二十）大数据量获取处理

    ODAC获取数据的效率比较高,在Web程序中希望能够更快获取第一页的数据时,可以有几种方式: 1.在数据库中进行分页处理: 2.获取所有数据,只是快速返回第一页数据. 第一种方案对应用服务器资源消耗最 ...

  9. itextpdf JAVA 输出PDF文档

    使用JAVA生成PDF的时候,还是有些注意事项需要处理的. 第一.中文问题,默认的itext是不支持中文的,想要支持,需要做些处理. 1.直接引用操作系统的中文字体库支持,由于此方案限制性强,又绑定了 ...

  10. Oracle Purchasing QUESTIONS AND ANSWERS

    Topic Summary Topic: CORRECTIONS: Corrections Topic: DELIVER: Receiving Delivery Topic: DROPSHIP: Dr ...