国产欧美日韩第一页|日本一二三不卡视频|在线精品小视频,亚洲第一免费播放区,metcn人体亚洲一区,亚洲精品午夜视频

ajax防止用戶重復(fù)提交點擊事件

2019-01-25 09:15:56 4766

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>防止ajax重復(fù)提交</title>

    </head>

    <body>

        <button id="btn">提交</button>

        <script>

 

            /**

             * 模擬ajax提交

             * @fn 回調(diào)函數(shù)

             * */

            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);

                //更改狀態(tài)

                btn.innerText='提交中...';

                //模擬ajax提交

                Ajax(function(data){

                    //請求成功

                    if(data.result){

                        console.log('請求成功');

                        //請求成功解鎖

                        btn.setAttribute('lock',"");

                        //還原狀態(tài)

                        btn.innerText='提交';

                    }else{

                        console.log('請求失敗');

                        //請求失敗解鎖

                        btn.setAttribute('lock',"");

                        //還原狀態(tài)

                        btn.innerText='提交';

                    }

                });

            }

        </script>

    </body>

<p>

    </html>

</p>

 

<p>

    <span style="color:#333333;font-family:-apple-system, "font-size:16px;background-color:#FFFFFF;">1.提交數(shù)據(jù)之前判斷當前提交按鈕是否存在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>


提交成功！非常感謝您的反饋，我們會繼續(xù)努力做到更好！

這條文檔是否有幫助解決問題？

非常抱歉未能幫助到您。為了給您提供更好的服務(wù)，我們很需要您進一步的反饋信息：

在文檔使用中是否遇到以下問題：