• 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>

    我生活的地方,我为何要生活。
  • 相关阅读:
    2020-05-12 Linux基本操作
    SpringBoot项目设置能访问静态资源,resource/static目录下文件
    2020-04-25 Hadoop框架学习
    2020-05-24 vue简单语法
    2020-04-25 elasticsearch
    2020-04-25 kafka
    2020-04-11 函数式数据处理(Java8)
    2020-03-29 分布式事务解决方案(RocketMQ)
    配置文件示例
    Spring-data-redis实现消息队列的demo(附源码)
  • 原文地址:https://www.cnblogs.com/hsd1727728211/p/5451068.html
Copyright © 2020-2023  润新知