在實際應用中,我們會遇見這樣的問題:使用ajax請求後臺時,如果後臺處理時間太長,那麼我們前臺可能會繼續請求或者進行其他的請求操作,這樣的話難免會發生數據錯亂,所以我們就需要進行防重複請求操作,接下來就通過一個簡單的方法來實現這個棘手的功能。
1. HTML代碼:
<form id="myformz" action="" method="post">
用戶名<input type="text" id="mobile" name="mobile">
密碼<input type="text" id="passwd" name="passwd">
<input type="button" value = "提交" name ="but" onClick="sbum();">
</form>
2. js代碼:
<script src="jquery.min.js"></script>
<script type="text/javascript">
//全局變量
var reqState = true;
function sbum() {
var mobile = $("#mobile").val();//得到表單裏的用戶名
var passwd = $("#passwd").val();//得到表單裏的密碼
if(reqState == true){//執行請求之前先判斷上一次請求是否結束
alert(reqState);
$.ajax({
url : "loginController/texts2.do",//後臺地址
type : "POST",//提交方式
data : {
"mobile" : mobile,//表單參數
"passwd" : passwd//表單參數
},
beforeSend:function(){//發送請求前執行
reqState=false;
},
complete: function () {//請求結束後執行
reqState=true;
},
success : function(data) {
alert("請求成功");
},
erreo : function(request) {
alert("請求失敗");
}
});
}
}
</script>
</html>
這裏主要是使用了ajax的兩個屬性:
下面這個屬性會在ajax請求之前執行,所以我們可以在該方法裏面,也就是說在請求之前執行我們需要的操作,比如把按鈕置灰,設置變量等等。
beforeSend:function(){//發送請求前執行
reqState=false;
},
下面這個屬性會在ajax請求結束之後執行,所以我們就可以在請求結束之後回更我們之前的操作。這裏我是把之前的false改爲了true。
complete: function () {//請求結束後執行
reqState=true;
},
下一篇實現:ajax的防重複請求