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>

    我生活的地方,我为何要生活。
  • 相关阅读:
    【SCOI 2011】 糖果
    【POJ 3159】 Candies
    【POJ 1716】 Integer Intervals
    【POJ 2983】 Is the information reliable?
    【POJ 1364】 King
    【POJ 1201】 Intervals
    【POJ 1804】 Brainman
    6月10日省中提高组题解
    【POJ 3352】 Road Construction
    【POJ 1144】 Network
  • 原文地址:https://www.cnblogs.com/hsd1727728211/p/5451068.html
Copyright © 2011-2022 走看看