点击按钮一次发送三个ajax请求怎么实现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击按钮一次发送三个ajax请求怎么实现相关的知识,希望对你有一定的参考价值。

参考技术A 1、点击一次发生两次请求。
  原因:submit类型的按钮,默认有提交行为,发生两次提交的原因是在执行完ajax请求后,并没有阻止submit的行为,所以解决方法有两种:
  a、不使用type为submit类型的按钮,而是使用type是button的按钮;
  b、在$('#submit').click函数中,最后加一行return false;,即可阻止submit。
2、点击一次发送一次请求,第二次点击发送两次,第三次点击发送三次,以此类推...

防止重复发送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; // 修改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操作 } })})


当然,具体问题具体分析。结合实际问题适当调整思路才能找到更好的解决方法。


最后


看完点个赞,分享一下吧,让更多的朋友能够看到。如果你喜欢前端开发博客的分享,就给公号标个星吧,这样就不会错过我的文章了。防止重复发送Ajax请求问题



好文和朋友一起看~

以上是关于点击按钮一次发送三个ajax请求怎么实现的主要内容,如果未能解决你的问题,请参考以下文章

如何防止重复发送ajax请求

防止重复发送Ajax请求的解决方案

JS583- 如何防止重复发送ajax请求

防止重复发送Ajax请求问题

按钮的ajax请求时,一次点击两次提交的问题

AJAX防重复提交的办法总结?