异步交互技术Ajax

在工作中有很多场景需要通过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; // 修