防止重复提交

简介

在现在的web开发中我们经常使用ajax从后端获取数据，提交数据。对于有些游戏爱好者或者手速甚快的同学来说，一个按钮触发click事件可以触发多次。有经验的前端开发者肯定会使用防止重复提交方式避免重复提交数据。有经验的后端则会在每次提交数据时加vision版本号。如果后端加版本号来验证，则需要前端每次提交时增加版本号这个字段。因此做防止重复提交还是交给伟大的前端同学哈！现在我就把我所使用的方式分享给大家。

<!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(function(data){
                    //请求成功
                    if(data.result){
                        console.log('请求成功');
                        //请求成功解锁
                        btn.setAttribute('lock',"");
                        //还原状态
                        btn.innerText='提交';
                    }else{
                        console.log('请求失败');
                        //请求失败解锁
                        btn.setAttribute('lock',"");
                        //还原状态
                        btn.innerText='提交';
                    }
                });
            }
        </script>
    </body>
</html>

逻辑思路：
1.提交数据之前判断当前提交按钮是否存在lock锁
2.在ajax提交之前给提交按钮上锁
3.ajax成功之后或者失败之后解锁

在线demo

总结

防止重复提交在开发中很实用，希望能够帮到你。