1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!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> |
