使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用于在Ajax請求發(fā)出前觸發(fā)函數(shù)，ajaxStop()方法用于在Ajax請求完成后觸發(fā)函數(shù)。它們的調(diào)用格式為：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，兩個方法中括號都是綁定的函數(shù)，當(dāng)發(fā)送Ajax請求前執(zhí)行ajaxStart()方法綁定的函數(shù)，請求成功后，執(zhí)行ajaxStop ()方法綁定的函數(shù)。
例如，在調(diào)用ajax()方法請求服務(wù)器數(shù)據(jù)前，使用動畫顯示正在加載中，當(dāng)請求成功后，該動畫自動隱藏，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于使用ajaxStart()和ajaxStop()方法綁定了動畫元素，因此，在開始發(fā)送Ajax請求時，元素顯示，請求完成時，動畫元素自動隱藏。
注意：該方法在1.8.2下使用是正常的
任務(wù)
我來試試，親自使用ajaxStart()和ajaxStop()方法綁定元素。
在下列代碼的第24、27行，調(diào)用ajaxStart()和ajaxStop()方法綁定元素，當(dāng)發(fā)送Ajax請求和結(jié)束請求時，在元素中顯示不同的文字內(nèi)容。
- ?不會了怎么辦
-
- 在調(diào)用
ajaxStart()和ajaxStop()方法之前，首先，需要通過選擇器獲取綁定方法的元素，然后，再通過元素調(diào)用這兩個方法。
- “ajaxStart”、“ajaxStop”書寫是否正確，區(qū)分大小寫。
<!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 () {
?{
$(this).html("正在請求數(shù)據(jù)...");
});
?{
$(this).html("數(shù)據(jù)請求完成！");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "http://yifanck.cn/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>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color:Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
ul
{
float: left;
width: 280px;
padding: 5px 0px;
margin: 0px;
font-size: 14px;
list-style-type: none;
}
ul li
{
float: left;
width: 280px;
height: 23px;
line-height: 23px;
padding: 3px 8px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
