防止重複提交

時間 2019-11-16

標籤防止重複提交简体版

原文原文鏈接

簡介

在如今的web開發中咱們常常使用ajax從後端獲取數據，提交數據。對於有些遊戲愛好者或者手速甚快的同窗來講，一個按鈕觸發click事件能夠觸發屢次。有經驗的前端開發者確定會使用防止重複提交方式避免重複提交數據。有經驗的後端則會在每次提交數據時加vision版本號。若是後端加版本號來驗證，則須要前端每次提交時增長版本號這個字段。所以作防止重複提交仍是交給偉大的前端同窗哈！如今我就把我所使用的方式分享給你們。html

<!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成功以後或者失敗以後解鎖
demo鏈接 sandbox.runjs.cn/show/3jrhzr…前端

總結

防止重複提交在開發中很實用，但願可以幫到你。web

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。