ajax 实现防止重复提交

发布时间：2020-05-25 08:00:46 所属栏目：PHP 来源：互联网

导读：ajax 实现防止重复提交

下面是脚本之家 jb51.cc 通过网络收集整理的代码片段。

脚本之家小编现在分享给大家，也给大家做个参考。

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

以上是脚本之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错，欢迎将脚本之家网站推荐给程序员好友。

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!