您的位置:首页 > 其它

防止重复发送Ajax请求问题

2018-01-17 21:35 253 查看
在工作中有很多场景需要通过Ajax请求发送数据,像是注册、登录、提交用户反馈等。用户在点击了“确认”按钮之后有可能一段时间内没有收到反馈页面无任何反应,然后就接着连续多次点击“确认”按钮导致发送n个重复的请求,给服务器造成不小压力。
那,有没有办法解决重复发送请求的问题呢?
从前端解决重复发送请求的方法是有的。
1、点击“确定”之后禁用该按钮
<input type="button"  id="submit-btn">
<script>
var btn=$("#submit-btn");
btn.onclick=function(){
btn.attr('disabled',true)
}
</script>
2、使用变量进行上锁

思路如下:声明变量lock,当lock值为true,禁止再次发送请求,当lock值为false,可以发送请求。在Ajax返回success或者error的回调函数中将lock置为false,也就是说只有当服务器给出响应之后才可以再次发送请求。
var lock=false; //
// 假设是点击一个button发送Ajax请求的
$btn.on('click',function(){
if(lock){
return;
}
lock=true; // 修改lock状态为true
$.ajax({
url:'/getdata/info/item.php',
type:'post',
dataType:'json',
data:"data",
success:function(){
lock=false;
........... // 其他的操作
},
error:function(){
lock=false;
........ //进行其他操作
}
})
})
3、设置时间,在规定时间内不允许再次发送请求

和方法二类似,不同点在于决定是否可以再次发送求情的条件是是否超过规定时间(3s、5s或其他时间)。
在最开始,声明变量lock=false。点击“确定”按钮,触发请求并将lock置为true。在规定时间之后(以3s为例)将lock置为false,此时就可以再次发送请求了。
var lock=false;
$btn.on('click',function(){
if(lock){
return;
}
lock=true;
setTimeOut(function(){
lock=false;
},3000) // 3s后将lock设置为false, lock为false时就可以再次发送请求了。。。。。。
$.ajax({
type:'post',
url:'/getdata/info/item.php',
dataType:'json',
data:'data',
success:function(){
....... //xxx操作
},
error:function(){
...... // xxx操作
}
})
})
当然,具体问题具体分析。结合实际问题适当调整思路才能找到更好的解决方法。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: