<!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>
<p>
</html>
</p>
<p>
<span style="color:#333333;font-family:-apple-system, "font-size:16px;background-color:#FFFFFF;">1.提交數據之前判斷當前提交按鈕是否存在lock鎖</span>
<span style="color:#333333;font-family:-apple-system, "font-size:16px;background-color:#FFFFFF;">2.在ajax提交之前給提交按鈕上鎖</span>
<span style="color:#333333;font-family:-apple-system, "font-size:16px;background-color:#FFFFFF;">3.ajax成功之後或者失敗之後解鎖</span>
</p>ajax 實現防止重複提交-www.cuteur.cn
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
愛奇藝數據湖實戰 - 實時湖倉一體化
01 概述 數據是洞察用戶、市場、運營決策的基礎資料，在愛奇藝被廣泛應用在推薦、廣告、用戶增長、營銷等場景中。愛奇藝大數據業務之前採用 Lambda 架構，滿足海量