簡(jiǎn)介
在現(xiàn)在的web開(kāi)發(fā)中我們經(jīng)常使用ajax從后端獲取數(shù)據(jù)，提交數(shù)據(jù)。對(duì)于有些游戲愛(ài)好者或者手速甚快的同學(xué)來(lái)說(shuō)，一個(gè)按鈕觸發(fā)click事件可以觸發(fā)多次。有經(jīng)驗(yàn)的前端開(kāi)發(fā)者肯定會(huì)使用防止重復(fù)提交方式避免重復(fù)提交數(shù)據(jù)。有經(jīng)驗(yàn)的后端則會(huì)在每次提交數(shù)據(jù)時(shí)加vision版本號(hào)。如果后端加版本號(hào)來(lái)驗(yàn)證，則需要前端每次提交時(shí)增加版本號(hào)這個(gè)字段。因此做防止重復(fù)提交還是交給偉大的前端同學(xué)哈！現(xiàn)在我就把我所使用的方式分享給大家。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>防止ajax重復(fù)提交</title>
</head>
<body>
<button id="btn">提交</button>
<script>
/**
* 模擬ajax提交
* @fn 回調(diào)函數(shù)
* */
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);
//更改狀態(tài)
btn.innerText='提交中...';
//模擬ajax提交
Ajax(function(data){
//請(qǐng)求成功
if(data.result){
console.log('請(qǐng)求成功');
//請(qǐng)求成功解鎖
btn.setAttribute('lock',"");
//還原狀態(tài)
btn.innerText='提交';
}else{
console.log('請(qǐng)求失敗');
//請(qǐng)求失敗解鎖
btn.setAttribute('lock',"");
//還原狀態(tài)
btn.innerText='提交';
}
});
}
</script>
</body>
</html>
邏輯思路：
1.提交數(shù)據(jù)之前判斷當(dāng)前提交按鈕是否存在lock鎖
2.在ajax提交之前給提交按鈕上鎖
3.ajax成功之后或者失敗之后解鎖
demo連接sandbox.runjs.cn/show/3jrhzr…
總結(jié)
防止重復(fù)提交在開(kāi)發(fā)中很實(shí)用，希望能夠幫到你。
