<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用ajaxStart()和ajaxStop()方法</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></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">111</li> </ul> </div> <script type="text/javascript"> $(function () { $(document).ajaxStart(function(){ console.log($(this)) $('#divload').html("正在请求数据..."); }); $(document).ajaxStop(function(){ console.log($(this)) $('#divload').html("数据请求完成!"); }); $("#btnShow").bind("click", function () { var $this = $(this); $.ajax({ url: "https://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><html xmlns="
<head>
<title>使用ajaxStart()和ajaxStop()方法</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></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">111</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$(document).ajaxStart(function(){
console.log($(this))
$('#divload').html("正在请求数据...");
});
$(document).ajaxStop(function(){
console.log($(this))
$('#divload').html("数据请求完成!");
});
$("#btnShow").bind("click", function () {
var $this = $(this);
$.ajax({
url: "https://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>