简介
在现在的web开发中我们经常使用ajax从后端获取数据，提交数据。对于有些游戏爱好者或者手速甚快的同学来说，一个按钮触发click事件可以触发多次。有经验的前端开发者肯定会使用防止重复提交方式避免重复提交数据。有经验的后端则会在每次提交数据时加vision版本号。如果后端加版本号来验证，则需要前端每次提交时增加版本号这个字段。因此做防止重复提交还是交给伟大的前端同学哈！现在我就把我所使用的方式分享给大家。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>防止ajax重复提交</title>
</head>
<body>
<button id="btn">提交</button>
<script> /** * 模拟ajax提交 * @fn 回调函数 * */ function Ajax(fn){ setTimeout(function(){ var data= {result:true,msg:'提交成功！'}; fn(data); },2000); } /** * btn click 提交事件 * * */ btn.onclick=function(){ //检查 按钮是否被锁住，锁住直接rerun if(btn.getAttribute('lock')){ return; } //上锁 btn.setAttribute('lock',1); //更改状态 btn.innerText='提交中...'; //模拟ajax提交 Ajax(function(data){ //请求成功 if(data.result){ console.log('请求成功'); //请求成功解锁 btn.setAttribute('lock',""); //还原状态 btn.innerText='提交'; }else{ console.log('请求失败'); //请求失败解锁 btn.setAttribute('lock',""); //还原状态 btn.innerText='提交'; } }); } </script>
</body>
</html>逻辑思路：
1.提交数据之前判断当前提交按钮是否存在lock锁
2.在ajax提交之前给提交按钮上锁
3.ajax成功之后或者失败之后解锁
demo连接 sandbox.runjs.cn/show/3jrhzr…
总结
防止重复提交在开发中很实用，希望能够帮到你。
今天的文章防止重复提交分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/14076.html
