jQuery使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用于在Ajax請求發(fā)出前觸發(fā)函數(shù)，ajaxStop()方法用于在Ajax請求完成后觸發(fā)函數(shù)。它們的調(diào)用格式為：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，兩個(gè)方法中括號都是綁定的函數(shù)，當(dāng)發(fā)送Ajax請求前執(zhí)行ajaxStart()方法綁定的函數(shù)，請求成功后，執(zhí)行ajaxStop ()方法綁定的函數(shù)。
例如，在調(diào)用ajax()方法請求服務(wù)器數(shù)據(jù)前，使用動畫顯示正在加載中，當(dāng)請求成功后，該動畫自動隱藏，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于使用ajaxStart()和ajaxStop()方法綁定了動畫元素，因此，在開始發(fā)送Ajax請求時(shí)，元素顯示，請求完成時(shí)，動畫元素自動隱藏。
注意：該方法在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("正在請求數(shù)據(jù)...");?
??????????????? });?
??????????????? $("#divload").ajaxStop(function(){?
??????????????????? $(this).html("數(shù)據(jù)請求完成！");?
??????????????? });?
??????????????? $("#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>
轉(zhuǎn)載于:https://www.cnblogs.com/pcyy/p/5454603.html
總結(jié)
以上是生活随笔為你收集整理的jQuery使用ajaxStart()和ajaxStop()方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 电动车未挂牌照+被扣押有两年没有去处理咋
- 下一篇： 奔驰S350L是前驱动吗？