ajax防止用户重复提交点击事件

2019-01-25 09:15:56 2888

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


提交成功!非常感谢您的反馈,我们会继续努力做到更好!

这条文档是否有帮助解决问题?

非常抱歉未能帮助到您。为了给您提供更好的服务,我们很需要您进一步的反馈信息:

在文档使用中是否遇到以下问题: