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>
<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()方法的详细内容。