今天在查看項目代碼的時候發現ajaxStart、ajaxStop這兩個方法，以前還沒用過，以前都是直接用$.ajax的。踩了些ajaxStart、ajaxStop的坑，網上查閱資料發現這兩個在不同版本的jquery用法不同
在查閱資料後，發現原來在jquery1.9+版本以後，ajax全局事件需綁定到document對象上才能觸發。
下面是各版本不同寫法：
<html>
<head>
<meta charset="utf-8">
<style>
#loading {
position: absolute;
top:0;
left:0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.2);
display: none;
}
#loading span {
position: absolute;
top: 48%;
left: 48%;
}
</style>
</head>
<body>
<div id="loading"><span>loading...</span></div>
<form id="demo">
<input type="text" value="demo1" name="demo1">
<input type="text" value="demo2" name="demo2">
<input type="text" value="demo3" name="demo3">
<input type="submit" value="提交" id="submit">
</form>
</body>
</html>
<script>
$(function(){
$("#submit").click(function(){
// var data = $("form").serializeArray();
var data = $("form").serialize();
$.ajax({
type:"get",
url:"1.php",
data:data,
dataType:"json",
success:function(data){
console.log(data);
},
error:function(xhr,error){
console.log(error);
}
})
})
// 1.9 以前寫法
$("#loading").ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
})
// 1.9+ 之後寫法
$(document).ajaxStart(function(){
$("#loading").show();
}).ajaxStop(function(){
$("#loading").hide();
})
// 以上兩種簡寫
// 1.9 以前
$("#loading").on("ajaxStart ajaxStop",function(){
$(this).toggle();
})
// 1.9+ 以後
$(document).on("ajaxStart ajaxStop",function(){
$("#loading").toggle();
})
})
</script>