ajax绑定事件页面重复提交,ajax防止用户重复提交点击事件

防止ajax重复提交

提交

/**

* 模拟ajax提交

* @fn 回调函数

* */

function Ajax(fn){

setTimeout(function(){

var data= {result:true,msg:'提交成功！'};

fn(data);

},2000);

}

/**

* btn click 提交事件

*

* */

btn.οnclick=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='提交';

}

});

}

1.提交数据之前判断当前提交按钮是否存在lock锁

2.在ajax提交之前给提交按钮上锁

3.ajax成功之后或者失败之后解锁