使用ajaxStart()和ajaxStop()方法，jQuery基础(五)一Ajax应用与常用插件教程-慕课网

使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：

$(selector).ajaxStart(function())和$(selector).ajaxStop(function())

其中，两个方法中括号都是绑定的函数，当发送Ajax请求前执行ajaxStart()方法绑定的函数，请求成功后，执行ajaxStop ()方法绑定的函数。

在浏览器中显示的效果：

从图中可以看出，由于使用ajaxStart()和ajaxStop()方法绑定了动画元素，因此，在开始发送Ajax请求时，元素显示，请求完成时，动画元素自动隐藏。

注意：该方法在1.8.2下使用是正常的

任务

我来试试，亲自使用ajaxStart()和ajaxStop()方法绑定元素。

在下列代码的第24、27行，调用ajaxStart()和ajaxStop()方法绑定元素，当发送Ajax请求和结束请求时，在元素中显示不同的文字内容。

?不会了怎么办

在调用ajaxStart()和ajaxStop()方法之前，首先，需要通过选择器获取绑定方法的元素，然后，再通过元素调用这两个方法。
“ajaxStart”、“ajaxStop”书写是否正确，区分大小写。

||

index.html
style.css

<!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("正在请求数据..."); }); ?{ $(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>

#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; }

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

||

1-9 使用ajaxStart()和ajaxStop()方法

使用ajaxStart()和ajaxStop()方法

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐