zoukankan      html  css  js  c++  java
  • jQuery使用ajaxStart()和ajaxStop()方法

    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>

    我生活的地方,我为何要生活。
  • 相关阅读:
    hudson搭建经验总结(二)
    CodePen最佳实例分享
    hudson搭建经验总结
    资料文件夹管理系统
    ueditor+word图片上传
    asp.net上传大文件
    UEditor粘贴word
    大文件上传组件
    文件资源管理系统
    ueditor+复制word图片粘贴上传
  • 原文地址:https://www.cnblogs.com/hsd1727728211/p/5451068.html
Copyright © 2011-2022 走看看