在实际应用中,我们会遇见这样的问题:使用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的防重复请求