- 工信部备案号 滇ICP备05000110号-1
- 滇公安备案 滇53010302000111
- 增值电信业务经营许可证 B1.B2-20181647、滇B1.B2-20190004
- 云南互联网协会理事单位
- 安全联盟认证网站身份V标记
- 域名注册服务机构许可：滇D3-20230001
- 代理域名注册服务机构：新网数码
相关文章
国信办再关闭31家违规网站 云南省2019年国家网络安全周在丽江启动，蓝队云获颁“最佳技术支持奖” 云南公布第二批免费向社会提供信息技术服务企业名单 英特尔计划在中国打造物联网国际品牌 中国互联网企业赴美上市规模预计今年或减半
ajax防止用户重复提交点击事件
2019-01-25 09:15:56
6157
<!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>
