在如今的web开发中咱们常常使用ajax从后端获取数据,提交数据。对于有些游戏爱好者或者手速甚快的同窗来讲,一个按钮触发click事件能够触发屡次。有经验的前端开发者确定会使用防止重复提交方式避免重复提交数据。有经验的后端则会在每次提交数据时加vision版本号。若是后端加版本号来验证,则须要前端每次提交时增长版本号这个字段。所以作防止重复提交仍是交给伟大的前端同窗哈!如今我就把我所使用的方式分享给你们。html
<!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…前端
防止重复提交在开发中很实用,但愿可以帮到你。web