同学们是不是经常遇到一个按钮多次提交ajax请求的情况发生?
造成这种情况的原因是ajax需要等待的时候太长,然后在等待的时候用户多次点击会出现多次ajax请求!最后多次ajax请求发生之后会被后端吐槽(也许是因为他们忘记在接口做限制 //蜜汁微笑)
该如何解决呢!
市面上的解决方案大抵是在ajax请求前加把锁锁住按钮,然后等后端接口返回信息后解锁,然后按钮又可以点击了,这样做到防止重复点击事件发生!!!
真的是炒鸡简单有效,现在我啥也不说,直接伤害炒鸡简单代码
1 |
|
说实话,世面上像我这种热心肠的人应该已经绝种了!!!我知道大部分同学可能都会直接复制粘贴代码了,然后一运行,***傻逼博主,贴的代码都运行不了!!!
其实不能怪我咯,宝宝好委屈咯,是因为浏览器自身是有跨域限制的,最后就是要启动一个web服务在访问服务上的html才能有效得避免以下跨域!!
首先你得先有node环境,如果你没有,请点击右上角XX,(因为你不可能是前端,你不会需要防止表单重复提交的解决方案!!!/托腮)
桌面新建文件夹,文件夹里新建一个index.html和一个index.js,index.html内容如上代码,index.js如下代码
1 | var http = require('http'); |
然后在新建文件夹下启动命令行工具,你应该有git吧!!!然后在命令行上输入node index, 然后在浏览器上访问localhost就可以看到页面了,然后点击按钮就可以看到效果啦!!
是不是很简单,很小白,就可以处理重复提交的问题了!!!
理想总是很丰满,现实总残酷得让人绝望。
我项目中ajax请求可不只一个哦,大概几十吧! 里面有很多ajax请求都需要防止重复提交,如果是项目开始的时候跟我提这个bug,我可能会一个个得去写,写几十把锁,so easy拉
但是我砖都搬完了,你叫我一个个去找再去写,老夫有点接受不了了!!
也幸亏我项目之前用了axios.js,我所有的请求都有一个过滤器,有一些公共的东西可以统一处理,例如所有请求都要的加载条和所有请求都要加时间戳来防止缓存,不然我一个个去加,可能我已经猝死了!
然后我一直在想这个过滤器上做文章,但是在上面加锁是不可能的,因为我们可能会同时请求几个借口拉取页面数据,几个你都同时加锁的话会导致一些接口无法使用,因为被锁住了! 我思考了好久,我个人觉得可以在html和css上做处理,我们可以定义一个html遮盖层,覆盖整个页面(透明度为0),然后ajax请求开始前就浮现出来,结束后隐藏,然后在过滤器上加上这个,就可以改一处代码,实现n处加锁了 /微笑
然后回到之前的index.html,click那块可以改成1
2
3
4
5
6
7
8
9
10
11
12
13
14
15btn.onclick = function(){
mask.style.display = "block";
ajax({
method: "get",
url: "/api/data",
data: {
page: 1,
count: 5
},
success: function(res){
console.log(res)
mask.style.display = "none";
}
})
}
卧槽!!!牛逼呀,厉害呀!吊炸天呀!!!比以前少了2行代码呀!!
好了,这就是我处理重复提交的方法,我目前没有遇到什么大问题,可能是我的项目没有什么流量吧!如果有什么建议和我做得不足的地方可以微信或者QQ给我指出,作为回报,我可以在lol或者王者里面带你上分哦!亲! /蜜汁微笑