jQuery使用ajaxStart()和ajaxStop()方法
- 巴扎黑原创
- 2017-07-03 10:52:211524浏览
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中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn