Ajax提交表单时防止重复提交


关键词

ajax 表单 重复提交

摘要

本文介绍在Ajax提交表单时,通过变量来控制重复提交。本文还介绍了表单自动检查的使用。

表单的重复提交是指用户连续多次点击表单按钮,导致系统多次执行了提交操作。表单提交操作防止重置提交是一件非常重要的事。如果不做处理,将导致非常严重的后果。

表单的提交本身是一件非常复杂的事情,除了防止重复提交之外,还得对内容进行检查,这里使用的是jquery validationEngine。

为了得到较好的使用体验,且为了防止用户使用“后退”导致系统重复操作,尽量使用Ajax来进行提交操作。

下面演示实际开发的例子:

HTML代码:

<form id="createForm" action="" method="POST" enctype="multipart/form-data" class="form-horizontal" role="form">

满多少:<input type="text" name="mj_man" placeholder="" class="col-xs-10 col-sm-5 validate[required,custom[integer]]" />
减多少:<input type="text" name="mj_jian" placeholder="" class="col-xs-10 col-sm-5 validate[required,custom[integer]]" />
<button class="btn btn-info aSubmit" type="button">
<i class="icon-ok bigger-110"></i> 提交
</button>

</form>


JS代码:

<script>
$(function () {  

    //新增
    var isSubmitting = false;
    $(".aSubmit").on('click',function(){
            
        //处理状态
        if(isSubmitting){
            return;
        }else{
            isSubmitting = true;
        }
        
        if($('#createForm').validationEngine('validate')){
            
            var f = document.getElementById("createForm");
            data="mj_man="+encodeURIComponent($.trim(f.mj_man.value));
            data+="&mj_jian="+encodeURIComponent($.trim(f.mj_jian.value));
            
            $.post("{:U('Admin/Shop/shopYouhuiManjianCreate')}",
                data,
                function(data,status,xhr){
                    if(data.status == 0){
                        layer.msg('操作成功', {time:1000}, function(){
                            window.location.href = '{:U('Admin/Shop/shopYouhuiManjianList')}';
                        });
                        
                    }else{
                        //处理状态
                        isSubmitting = false;
                        
                        layer.msg('操作失败,错误:'+data.info);
                    }
                }
            );
        }else{
            //处理状态
            isSubmitting = false;
        }
    })
    
});
</script>


关于Ajax提交表单时防止重复提交,本文就介绍这么多,希望对您有所帮助!


 

文章的版权

洪哥写文章很苦逼,如果本文对您略有帮助,点击感兴趣的广告支持洪哥!万分感谢!本文属于“洪哥笔记”原创文章,转载请注明来源地址:Ajax提交表单时防止重复提交:http://www.splaybow.com/post/ajax-form-submit-chongfutijiao-7135.html

关注与收藏

如果您在服务器运维、网络管理、网站或系统开发过程有需要提供收费服务,请加QQ:115085382!十年运维经验,帮您省钱、让您放心!
亲,如果有需要,先存起来,方便以后再看啊!加入收藏夹的话,按Ctrl+D


« 用户体验!UI设计的30条黄金准则