ajax 實現防止重復提交

2017/09/19 110921

清華大佬耗費三個月吐血整理的幾百G的資源，免費分享！....>>> 

<!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>


	</html>





	1.提交數據之前判斷當前提交按鈕是否存在lock鎖 2.在ajax提交之前給提交按鈕上鎖 3.ajax成功之后或者失敗之后解鎖