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>

  • 相关阅读:
    sublime 标题乱码,内容正常
    解决PHP7+ngnix+yaf框架404的问题
    调用RPC接口出现错误:Yar_Client_Transport_Exception (16) curl exec failed 'Timeout was reached'
    xhprof安装和使用
    单点登录
    如何让局域网内Apache互相访问
    lnmp
    virtualbox
    微信省市区 Mysql数据库
    lnmp
  • 原文地址:https://www.cnblogs.com/pcyy/p/5454603.html
Copyright © 2011-2022 走看看