美文网首页WEB前端程序开发程序员@IT·互联网
常见的处理表单重复提交的方式

常见的处理表单重复提交的方式

作者: itcode | 来源:发表于2017-09-18 21:27 被阅读335次

表单重复提交是在web开发中经常遇到的问题,顾名思义就是指用户有意或无意对同一个表单提交了两次(多次),轻则引起系统数据出现重复,重则引起系统业务逻辑异常,导致系统数据错乱。一方面向数据库中插入大量的重复且没有意义的数据,占用服务器的资源,另一方面处理请求服务器并没有检查请求是否为重复的请求,可能会导致恶意的攻击。
一、引起表单重复提交有以下几种常见场景:

  1. 重复点击提交按钮。包括恶意的连续点击提交按钮,或因为网络慢、服务器处理速度慢等引起的用户多次点击。
  2. 表单提交处理完后,通过浏览器的后退按钮回到原页面再次点击提交按钮。
  3. 通过点击浏览器的刷新按钮,导致表单重复提交 。
  4. 通过浏览器的历史记录,获取表单提交的URL地址,再次访问。

二、解决方式

1.不用转发到另一页面,采用重定向的方式跳转到目标页面
2.JS脚本方式

JS脚本方式只能限制场景1的多次点击,且须和服务端方式结合使用。JS限制有以下几种方式:
(1)定义全局变量,在form提交前判断是否已有提交过

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

    <form action=""  method="post" onsubmit="return checkSubmit();">

(2)单击提交按钮后,立刻禁用改按钮
(3)单击提交按钮后,弹出屏蔽层,防止用户第二次点击

3. 服务端方式

在打开页面同时生成一个token,存放在session中,同时在页面的form中设置一个隐藏域,表单提交时后端检查session中是否存在该token,存在则立即从session中remove,然后进行正常业务逻辑操作(如业务逻辑操作失败则可再添加该token到session中,方便用户修改数据后再提交),不存在该token则返回重复提交的提示。 服务端方式防止表单重复提交能解决大部分表单重复提交的问题,但是也存在一些缺陷。比如,针对同一个表单快速重复提交的情况并不能准确保证只有一个请求被正常处理;session中存放token只能针对一个表单,如果用户在同一个会话里同时打开多个form表单,则只能正确处理最后一个打开的form页面(可采用在数据库中保存处理过的token替换remove的方式,但该方式性能较差,不推荐采用)。

4.唯一性约束

在数据库中增加唯一性约束限制,这是最有效防止表单重复提交的方式。

三、总结
一般情况下采用JS脚本方式和服务端方式两种结合已可防止表单重复提交,针对特殊业务要求的可采用数据库唯一性约束限制等方式来强制保证业务逻辑上的数据唯一要求。

相关文章

  • 常见的处理表单重复提交的方式

    表单重复提交是在web开发中经常遇到的问题,顾名思义就是指用户有意或无意对同一个表单提交了两次(多次),轻则引起系...

  • Javascript-表单脚本

    一、表单的基础知识 1、表单提交 普通提交 以编程方式调用submit()方法提交表单 解决表单重复提交的办法:1...

  • 12、Struts2表单重复提交

    什么是表单重复提交表单的重复提交:若刷新表单页面, 再提交表单不算重复提交.在不刷新表单页面的前提下:多次点击提交...

  • SpringMVC+Thymeleaf 处理表单提交

    SpringMVC+Thymeleaf 处理表单提交 thymleaf处理表单提交的方式和jsp有些类似,也有点不...

  • SpringMVC+Thymeleaf 处理表单提交

    SpringMVC+Thymeleaf 处理表单提交 thymleaf处理表单提交的方式和jsp有些类似,也有点不...

  • 防止表单重复提交

    嘿,大家好,今天我来介绍几种简单的防止表单重复提交的方法: 防止表单重复提交 方法一:前端方式 当点击提交或者保存...

  • Struts2学习笔记 | 防止表单重复提交及自定义拦截器

    表单重复提交的概述 若刷新表单页面,再提交表单不算重复提交。 若是重定向,已经提交成功后再刷新不算重复提交。 以下...

  • From表单提交数据的几种方式

    目录 1,Form表单的常用属性2,浏览器提交表单时执行步骤3,提交方法4,常见的几种提交方式 form表单常用属...

  • vue中axios发送post请求

    axiox的post参数提交 下面这个代码是修改axios post的提交方式为表单的方式 在node中 处理...

  • 文件上传

    常见的文件上传方式 1.表单上传 method="post": 采用post方式提交数据enctype="mult...

网友评论

    本文标题:常见的处理表单重复提交的方式

    本文链接:https://www.haomeiwen.com/subject/inxisxtx.html