ajax防重複請求

       在實際應用中,我們會遇見這樣的問題:使用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的防重複請求

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章