ajaxStart()
和ajaxStop()
方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为:
<strong>$(selector).ajaxStart(function())</strong>
和<strong>$(selector).ajaxStop(function())</strong>
其中,两个方法中括号都是绑定的函数,当发送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> <p id="ptest"> <p class="title"> <span class="fl">加载一段文字</span> <span class="fr"> <input id="btnShow" type="button" value="加载" /> </span> </p> <ul> <li id="pload"></li> </ul> </p> <script type="text/javascript"> $(function () { $("#pload").ajaxStart(function(){ $(this).html("正在请求数据..."); }); $("#pload").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()方法的详细内容。更多信息请关注PHP中文网其他相关文章!