精华内容
下载资源
问答
  • 如何避免表单重复提交
    2021-03-15 03:51:08

    用户在操作表单Post数据时往往会出现表单数据重复提交的问题,尤其在Web开发中此类问题比较常见。刷新页面,后退操作以前的页面,单机多次按钮都会导致数据重复提交。此类问题是因为浏览器重复提交HTTP请求导致。

    下面列出了四种比较常用的解决方案:

    1

    在数据库添加唯一字段

    在数据库建表的时候在ID字段添加主键约束,账号,名称的信息添加唯一性约束。确保数据库只可以添加一条数据。

    此方法从根本上的防止了数据重复提交。

    2

    用js为添加按钮禁用

    当用户提交表单之后,可以使用js将提交按钮隐藏(disable属性),防止用户多次点击按钮提交数据。

    注意:如果客户端禁用了js,则此方法无效。

    3

    使用Post/Redirect/Get

    Post/Redirect/Get简称PRG,是一种可以防止表单数据重复提交的一种Web设计模式,像用户刷新提交响应页面等比较典型的重复提交表单数据的问题可以使用PRG模式来避免。例如:当用户提交成功之后,执行客户端重定向,跳转到提交成功页面。

    注意:PRG设计模式并不适用所有的重复提交情况,比如:

    1)由于服务器响应缓慢,用户刷新提交POST请求造成的重复提交。

    2)用户点击后退按钮,返回到数据提交界面,导致的数据重复提交。

    3)用户多次点击提交按钮,导致的数据重复提交。

    4)用户恶意避开客户端预防多次提交手段,进行重复数据提交。

    4

    使用Session设置令牌

    客户端请求页面时,服务器为每次产生的Form表单分配唯一的随机标识号,并且在orm的一个隐藏字段中设置这个标识号,同时在当前用户的Session中保存这个标识号。当提交表单时,服务器比较hidden和session中的标识号是否相同,相同则继续,处理完后清空Session,否则服务器忽略请求。

    注意:恶意用户可利用这一性质,不断重复访问页面,以致Session中保存的标识号不断增多,最终严重消耗服务器内存。可以采用在Session中记录用户发帖的时间,然后通过一个时间间隔来限制用户连续发帖的数量来解决这一问题。

    更多相关内容
  • 如何避免表单重复提交,这篇文章就为大家详细介绍了Java表单重复提交避免方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 因为我们不想让我们的服务器重复处理没必要的数据,同时我们也是避免我们的数据库产生重复的数据,避免表单重复提交也是让我们的网站更安全的一种表现。 先看一下有哪些情况下回导致表单重复提交呢,知道哪些情况下...
  • 表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次。 点击刷新按钮。 使用浏览器后退按钮重复之前的操作,导致重复提交表单。 使用...
  • 3.什么情况需要避免表单重复提交?  什么叫表单提交问题,说白了,是同一份信息,重复的提交给服务器。  那么,在什么情况下回产生表单重复提交的情况呢?  给大家列举以下情况:  1.点击F5刷新页面:当用户...
  • 今天小编就为大家分享一篇防止Layui form表单重复提交的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Django框架开发中避免表单重复提交

    千次阅读 2018-09-08 17:35:34
    Form表单做为web2.0时代的重要角色,也是我们与web网站进行数据交互的重要渠道,但是大家在web网站开发过程中,都会遇到一个问题,那就是如何避免表单重复提交,我们可不确定用户可在提交了一个表单后,是否有足够的...

    Form表单做为web2.0时代的重要角色,也是我们与web网站进行数据交互的重要渠道,但是大家在web网站开发过程中,都会遇到一个问题,那就是如何避免表单重复提交,我们可不确定用户可在提交了一个表单后,是否有足够的耐心等待我们的程序加载完成,如果此时用户不耐烦的在前台重复刷新页面,那么就会造成数据重复提交、信息不准确,因此我们在程序设计时一定要规避这样的问题,接下来介绍一下在Django框架开发中如何避免此问题。

    首先说明一下Http协议中两种非常常见的方法GET和POST。

    1、GET方法往往被视为向服务器索取信息的一种手段,但是通过使用"?"和"&"符号也可以将不同的表单项提交给服务器,例如"/test?id=1"中我们就将id=1提交给了后台,有时在一些特殊情况中,我们甚至不需要在html中写form表单,只要我们保证url正确就可以了,但是使用GET方式提交也有一个问题需要注意,IE对于URL长度的限制是2083个字节,其他浏览器或是web server都有不同的限制,所以在提交较长的内容时,GET方法就有些不合适了。

    2、POST方法相比GET方法在数据提交上更安全一些,因为GET方法将参数统一放到了URL中,随后在HTTP包头中发向服务器,但是提交的参数也就无疑被暴露了,在浏览器中可以直观的看到提交的具体内容,在web server中也可以通过访问日志随便查看提交的内容,对于有安全性的数据一定是采用POST方式来提交的,同时对于密码等敏感内容也一定要做加密处理,采用POST方法对于数据内容理论上也没有长度限制,这样就可以提交更多的数据内容了。

      使用POST方法提交表单往往可以增加信息传输的安全性,如果表单项过多也避免了较长的url,因此在web开发中我更喜欢用POST方法,回到之前的问题,就是页面提交过后,此时如果刷新页面,那么浏览器会提示重新提交表单,此时如果我们点击继续后,那么浏览器就会将之前提交过的内容再次发送至服务器,如果我们在后台没有做限制处理,那么数据就被重复提交了,试想一下如果A用户要转账给B用户,A用户输入转账金额2000元,在表单提交后,后台根据A用户发送的请求在数据库里更新A账户信息,如果此时A用户重复刷新页面,那么后台岂不是要连续的从A用户里扣除2000元增加到B用户中么,虽然现实生活中不可能发生这样的事情,但是这样却很好的说明了表单重复提交的危险性,因此对于POST方法提交表单,我们可以用下面的方式来避免重复提交。

    1、URL重定向

      这种方式较为简单,我们可以在用户提交的表单后,在提交页面做一个读秒的倒计时提示,这也是我们在大多数网站上经常见到的,在倒计时结束后,页面被重新定向到上一级页面,或是我们希望被跳转的页面,这样在一定程度上就避免了重复刷新带来的风险,或是在页面提交后直接进行URL重定向,在Django的视图中我们可以使用HttpResponseRedirect来重定向页面。

    2、Cookie验证

      上面的方式我们通过页面来进行控制,也就是说提交过后页面url放生了变化,此时用户再次刷新时就不会请求之前提交的页面,除了URL重定向,我们也可以通过cookie中key-value来做进一步限制,首先进入提交页前我们在cookie中写入一个值,在提交过后重置该值,这样后台通过获取cookie中的值就可以做判断了,此时如果用户再次刷新页面时,就可以返回提示说明信息已经提交过,不需要重复提交,在django框架中的代码如下。

    # 表单视图
    def page(request):
        response = render_to_response('post.html')
        # 在客户端Cookie中添加Post表单token,避免用户重复提交表单
        response.set_cookie("postToken",value='allow')
        return response
     
    #提交视图
    def post(request):
        # 检测Token值,判断用户提交动作是否合法
        if request.COOKIES["postToken"] !='allow':
            # 不存在合法Token,该表单为重复提交
            return HttpResponse("you can't post it again.")
        '''
        代码逻辑处理段
        '''
        response = render_to_response('newPage.html')
        # 表单POST提交成功,重置客户端Cookie中存在的Token值,避免重复提交
        response.set_cookie("postToken",value='disable')
        return response

    3、Hidden属性的隐藏域

      上一种方式我们在用户的浏览器中写入了指定的token值,我们也可以在服务器的session会话中写入特定的信息,然后将内容渲染到html页面中表单的隐藏域,用户从页面中是看不到这个隐藏域的,一般有特殊信息提交时会用到,比如这里的重复提交验证,我们就可以用表单的Hidden这个属性,我们将服务器生成的值写入到表单,随用户操作一起提交回服务器,那么如果该值与服务器端匹配,程序继续执行,否则认为重复提交,这里要注意与cookie操作中一样,我们在提交完后,服务器一定要清空session中的值。

    # 表单视图
    def page(request):
        # 在服务端session中添加key认证,避免用户重复提交表单
        token = allow # 可以采用随机数
        request.session['postToken'] = token
        # 将Token值返回给前台模板
        return render_to_response('post.html','postToken':token)
     
    #提交视图
    def post(request):
        # 检测session中Token值,判断用户提交动作是否合法
        Token = request.session.get(postToken,default=None)
        # 获取用户表单提交的Token值
        userToken = request.POST['postToken']
        if  userToken !=Token:
            # 不存在合法Token,该表单为重复提交
            return HttpResponse("you can't post it again.")
        '''
        代码逻辑处理段
        '''
        # 表单POST提交成功,重置服务端中存在的Token值,避免重复提交
        del request.session['postToken']
        return render_to_response('newPage.html')

    4、验证码

      我们可以在表单页中加入验证码,每次提交时服务端来做验证,但是这样的方式又影响了提交操作的便捷度,有得有失。

    对于GET的提交方式较为简单,在提交后重新定义url地址就可以了,因为url中没有了参数,也就避免了重复提交,但是为了避免用户重新访问之前的url地址,我们也可以结合上面的方法来对GET方法进行限制。

    写在最后

      对于表单重复提交的情况,我们发现往往最容易出现在表单页与提交页URL相同、或是页面提交后依然停留在提交页URL中,在Django框架中,我认为表单页与提交页应该尽量使用不同的URL,不同的视图,这样我们可以更好的避免该问题,例如在提交后我们将URL重定向到表单页,甚至可以在前台使用Ajax异步来提交数据,这样提交动作不会影响到页面变化,用户再次刷新也只能刷新当前的表单页了。相信在web程序开发中一定还有更多种方法来规避表单重复提交的问题,这里所展示的也不一定是最完整准确的,但在web程序开发中我们一定要考虑到类似这样的异常,这才是最重要的

     

    原创文章首发自阿布的博客,本文地址:http://www.abuve.com/article/17/

     

     

    展开全文
  • 第一种:用flag标识,下面的代码设置checkSubmitFlg标志;第二种:在onsubmit事件中设置,在第一次提交后使提交按钮失效,感兴趣的朋友可以了解下
  • 防止表单重复提交有很多种方法,其不外乎,客户端脚本防止刷新,服务端token验证等等,thinkphp内置了表单token验证,可以方便的防止表单重复提交
  • 表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次。 点击刷新按钮。 使用浏览器后退按钮重复之前的操作,导致重复提交表单。 使用...
  • 我的解决办法如下(只针对客户端): 用户点击提交按钮后给按钮添加disabled属性 代码如下:$(“input:submit”).each(function() { var srcclick = $(this).attr(“onclick”); if(typeof(srcclick)==”function”){...
  • 1、第一个我个人觉得是最好的:Token。Token的基本原理:服务器端在处理到达的请求之前,会将请求中包含...这样如果用户回退到刚才的提交页面并再次提交的话,客户端传过来的令牌就和服务器端的令牌不一致,从而有效地

    1、第一个我个人觉得是最好的:Token。

    Token的基本原理:服务器端在处理到达的请求之前,会将请求中包含的令牌值与保存在当前用户会话中的令牌值进行比较,看是否匹配。在处理完该请求后,且在答复发送给客户端之前,将会产生一个新的令牌,该令牌除传给客户端以外,也会将用户会话中保存的旧的令牌进行替换。这样如果用户回退到刚才的提交页面并再次提交的话,客户端传过来的令牌就和服务器端的令牌不一致,从而有效地防止了重复提交的发生。

    部分代码:

    if (isTokenValid(request, true)) {
        // your code here
       return mapping.findForward("success");
    } else {
       saveToken(request);
       return mapping.findForward("submitagain");
    }

    Struts根据用户会话ID和当前系统时间来生成一个唯一(对于每个会话)令牌的,具体实现可以参考TokenProcessor类中的generateToken()方法。

    2、通过JavaScript去控制,设置一个变量,只允许提交一次。

    <script language="javascript">
       var checkSubmitFlg = false;
       function checkSubmit() {
       	if (checkSubmitFlg == true) {
    	    return false;
       	}
       	checkSubmitFlg = true;
            return true;
        }
    
       document.ondblclick = function docondblclick() {
           window.event.returnValue = false;
        }
    
       document.onclick = function doconclick() {
           if (checkSubmitFlg) {
               window.event.returnValue = false;
           }
       }
    </script>

    html代码:

    <html:form action="myAction.do" method="post" οnsubmit="return checkSubmit();">

    3、还是通过JavaScript,将提交按钮或者image置为disable  

    <html:form action="myAction.do" method="post" οnsubmit="getElById('submitInput').disabled = true; return true;">
        <html:image styleId="submitInput" src="images/ok_b.gif" border="0" />
    </html:form>


    展开全文
  • 主要介绍了jquery提交form表单时禁止重复提交的方法,需要的朋友可以参考下
  • 下面小编就为大家带来一篇详谈表单重复提交的三种情况及解决方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • springboot2.1+redis+拦截器 防止表单重复提交详细完整介绍,所用到的文件都上传了,下载即可使用。自己花了半天整理,并且测试通过,使用在实际项目中的,希望对每一个下载的朋友有帮助。
  • 在开发中,如果一个新增或修改的表单,在后台完成数据库操作后我们设定的不是跳转到其他页面,还是返回本页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交,即这条记录会被增加或修改两次。...
  • 本文较为详细的汇总了PHP防止表单重复提交的几种常用方法,在PHP程序开发中有着很高的实用价值。具体方法如下: 1. 使用JS让按钮在点击一次后禁用(disable)。采用这种方法可以防止多次点击的发生,实现方式较简单...
  • JEECG 避免表单重复提交

    千次阅读 2017-05-04 22:22:45
    JEECG项目,采用的是标签式开发...因此我们需要对这个类进行改造,使其能够避免表单重复提交。针对目前JEECG项目当中的添加、编辑页面大部分采用的是Jquery UI当中的dialog插件。在表单验证通过,进行提交之前我们需

    JEECG项目,采用的是标签式开发,这个在一定的程度上面大大的方便我们进行二次开发。用于表单验证的插件是Validform V5.3.1。
    表单验证对应的标签类:FormValidationTag.java
    因此我们需要对这个类进行改造,使其能够避免表单的重复提交。针对目前JEECG项目当中的添加、编辑页面大部分采用的是Jquery UI当中的dialog插件。在表单验证通过,进行提交之前我们需要在页面的上方增加一个遮罩,用于防止表单的再次提交。因此我们在点击提交按钮之后,再次的弹出一个对话框,用于做遮罩使用。

    首先,初始化一个对话框的引用,方便后面可以进行关闭遮罩。

    sb.append("<script type=\"text/javascript\">")
    //增加一个全局的js变量
    sb.append("var subDlgIndex = null;");
    sb.append("$(function(){");
    ...

    初始化对话框:

    /**
         * 增加显示加载图层
         * @param sb
         */
        private void submitLoading(StringBuffer sb) {
            sb.append("subDlgIndex = $.dialog({");
            sb.append("content: '正在加载中'");
            sb.append(",zIndex:19910320");
            sb.append(",lock:true");
            sb.append(",width:100");
            sb.append(",height:50");
            sb.append(",opacity:0.3");
            sb.append(",title:'提示'");
            sb.append(",cache:false");
            sb.append("");
            sb.append("});");
            //对话框显示出来之后,我们将其隐藏,使用一个加载gif图片
            sb.append("var infoTable = subDlgIndex.DOM.t.parent().parent().parent();");
            sb.append("infoTable.parent().append('<div id=\"infoTable-loading\" style=\"text-align:center;\"><img src=\"plug-in/layer/skin/default/loading-0.gif\"/></div>');");
            sb.append("infoTable.css('display','none');");
        }

    对原有beforesubmit进行修订:

    if (beforeSubmit != null) {
        sb.append("beforeSubmit:function(curform){var tag=false;");
        submitLoading(sb);
        sb.append("return " + beforeSubmit );
        if(beforeSubmit.indexOf("(") < 0){
            sb.append("(curform);");
        }
        sb.append("},");
    }else{
        sb.append("beforeSubmit:function(curform){var tag=false;");
        submitLoading(sb);
        sb.append("},");
    }

    之后我们需要在callback当中将遮罩对话框关闭和隐藏加载图片:

    sb.append("callback:function(data){");
    sb.append("if(subDlgIndex && subDlgIndex != null){");
    sb.append("$('#infoTable-loading').hide();");
    sb.append("subDlgIndex.close();");
    sb.append("}");
    ...

    到这里基本的添加、编辑页面我们均已对其增加响应的加载效果
    这里写图片描述
    但是这边还会有一个问题就是在导入数据,上传文件的时候,这个对应的遮罩对话框不会关闭。
    我们需要再对UploadTag.java进行修订,让其在上传完成的时候,判断是否存在遮罩对话框,存在的话将其关闭:

                    "onQueueComplete : function(queueData) { ");
                    if(dialog)
                    {
                    sb.append("var win = frameElement.api.opener;"        
                    +"win.reloadTable();"
                    +"win.tip(serverMsg);"
                    //判断是否存在遮罩对话框
                    +"if('undefined' != typeof subDlgIndex && subDlgIndex != null){"
                    +"$('#infoTable-loading').hide();"
                    +"subDlgIndex.close();"
                    +"}"
                    +"frameElement.api.close();");
    展开全文
  • 好友使用vue技术封装了一个专门用于提交表单和下载文件的“防抖按钮”,其实现原理和使用方法看这里 https://blog.csdn.net/PursueExcellence/article/details/103903139。
  • 由于刷新提交表单,实际上提交的就是上一次正常提交的表单,所以我们只要做一个标志,判断出是新表单还是上一次的旧表单就可以分辨出是否进行了重复提交操作。 实现方法: 在页面上放置一个Hidden域,当页面第一次...
  • 1.前端处理(场景:用于网络延迟情况下用户点击多次submit按钮导致表单重复提交) ①:通过一个标识来控制表单提交之后,再次提交会直接返回处理。 Var isCommitted = false; //表单是否应提交标识,默认为false ...
  • 重复提交、重复刷新、防止后退等等都是属于系统为避免重复记录而需要解决的问题,在客户端去处理需要针对每一种的可能提出相应的解决方案,然而在服务器端看来只不过是对于数据真实性的检验问题
  • ajax beforeSend 避免表单重复提交 $.ajax({ url: '/admin/plan/add', type: 'post', data: $("#planForm").serialize(), async:false, ...
  • 1 javascript ,设置一个变量,只允许提交一次。 [removed] var checksubmitflg = false; function checksubmit() { if (checksubmitflg == true) { return false; } checksubmitflg = true; return true; } ...
  • 二、防止表单重复提交的方法 a>禁掉提交按钮。表单提交后disabled现在的按钮或者取消该按钮的点击事件或者默认事件。这种方法防止心急的用户多次点击按钮。但有个问题,如果在客户端把Javascript给禁止掉,这种方法...
  • 重定向防止表单重复提交1、表单重复提交的情况:2、实例(1)针对第一种情况(提交完表单之后,刷新网页)(2)针对第二种情况(网络延迟)(3)回退按钮重复提交表单3、重复提交带来的问题 1、表单重复提交的情况:...
  • 主要介绍了JSP针对表单重复提交的处理方法,涉及JSP基于session的重复提交判定使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,091
精华内容 37,636
关键字:

如何避免表单重复提交