博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用Session防止表单重复提交
阅读量:6638 次
发布时间:2019-06-25

本文共 4057 字,大约阅读时间需要 13 分钟。

hot3.png

 在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交。

一、表单重复提交的常见应用场景

有如下的form.jsp页面

复制代码

           Form表单                         用户名:

复制代码

  form表单提交到DoFormServlet进行处理

复制代码

           DoFormServlet                                       request.setCharacterEncoding("UTF-8"         String userName = request.getParameter("username"                                   Thread.sleep(3*1000         }            System.out.println("向数据库中插入数据:"+                         }

复制代码

  如果没有进行form表单重复提交处理,那么在网络延迟的情况下下面的操作将会导致form表单重复提交多次

1.1、场景一:在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交

  演示动画如下所示:

 1.2、场景二:表单提交后用户点击【刷新】按钮导致表单重复提交

演示动画如下所示:

  点击浏览器的刷新按钮,就是把浏览器上次做的事情再做一次,因为这样也会导致表单重复提交。

1.3、场景三:用户提交表单后,点击浏览器的【后退】按钮回退到表单页面后进行再次提交

演示动画如下所示:

二、利用JavaScript防止表单重复提交

  既然存在上述所说的表单重复提交问题,那么我们就要想办法解决,比较常用的方法是采用JavaScript来防止表单重复提交,具体做法如下:

修改form.jsp页面,添加如下的JavaScript代码来防止表单重复提交

复制代码

           Form表单                                                                                                                用户名:

复制代码

  我们看看使用了JavaScript来防止表单提交重复是否可以成功,运行效果如下:

  可以看到,针对"在网络延迟的情况下让用户有时间点击多次submit按钮导致表单重复提交"这个应用场景,使用JavaScript是可以解决这个问题的,解决的做法就是"用JavaScript控制Form表单只能提交一次"。

  除了用这种方式之外,经常见的另一种方式就是表单提交之后,将提交按钮设置为不可用,让用户没有机会点击第二次提交按钮,代码如下:

复制代码

            btnSubmit = document.getElementById("submit"          btnSubmit.disabled= "disabled"            }

复制代码

运行效果如下:

   另外还有一种做法就是提交表单后,将提交按钮隐藏起来,这种做法和将提交按钮设置为不可用是差不多的,个人觉得将提交按钮隐藏影响到页面布局的美观,并且可能会让用户误以为是bug(怎么我一点击按钮,按钮就不见了呢?用户可能会有这样的疑问),我个人在开发中用得比较多的是表单提交后,将提交按钮设置为不可用,反正使用JavaScript防止表单重复提交的做法都是差不多的,目的都是让表单只能提交一次,这样就可以做到表单不重复提交了。

  使用JavaScript防止表单重复提交的做法只对上述提交到导致表单重复提交的三种场景中的【场景一】有效,而对于【场景二】和【场景三】是没有用,依然无法解决表单重复提交问题。

三、利用Session防止表单重复提交

  对于【场景二】和【场景三】导致表单重复提交的问题,既然客户端无法解决,那么就在服务器端解决,在服务器端解决就需要用到session了。

  具体的做法:在服务器端生成一个唯一的随机标识号,专业术语称为Token(令牌),同时在当前用户的Session域中保存这个Token。然后将Token发送到客户端的Form表单中,在Form表单中使用隐藏域来存储这个Token,表单提交的时候连同这个Token一起提交到服务器端,然后在服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致,如果不一致,那就是重复提交了,此时服务器端就可以不处理重复提交的表单。如果相同则处理表单提交,处理完后清除当前用户的Session域中存储的标识号。

  在下列情况下,服务器程序将拒绝处理用户提交的表单请求:

  1. 存储Session域中的Token(令牌)与表单提交的Token(令牌)不同。

  2. 当前用户的Session中不存在Token(令牌)

  3. 用户提交的表单数据中没有Token(令牌)

看具体的范例:

  1.创建FormServlet,用于生成Token(令牌)和跳转到form.jsp页面

复制代码

           FormServlet          serialVersionUID = -884689940866074733L                              String token = TokenProccessor.getInstance().makeToken();         System.out.println("在FormServlet中生成的token:"+         request.getSession().setAttribute("token", token);           request.getRequestDispatcher("/form.jsp").forward(request, response);                         }

复制代码

  2.在form.jsp中使用隐藏域来存储Token(令牌)

复制代码

     form表单                                                                            用户名:

复制代码

  3.DoFormServlet处理表单提交

复制代码

           DoFormServlet                                        b = isRepeatSubmit(request);             (b==                 System.out.println("请不要重复提交"                               request.getSession().removeAttribute("token");             System.out.println("处理用户提交请求!!"                                                          String client_token = request.getParameter("token"                          (client_token==                                             String server_token = (String) request.getSession().getAttribute("token"                          (server_token==                                             (!                                                                       }

复制代码

  生成Token的工具类TokenProccessor

复制代码

                                           TokenProccessor instance =                                                            String makeToken(){                    String token = (System.currentTimeMillis() +  Random().nextInt(999999999)) + ""                               MessageDigest md = MessageDigest.getInstance("md5"              md5[] =                          BASE64Encoder encoder =                       }                  }

复制代码

  首先访问FormServlet,在FormServlet中生成Token之后再重定向到form.jsp页面,这次是在服务器端处理表单重复提交的,运行效果如下:

  从运行效果中可以看到,通过这种方式处理表单重复提交,可以解决上述的场景二和场景三中出现的表单重复提交问题。

转载于:https://my.oschina.net/u/2450896/blog/537630

你可能感兴趣的文章
java编程思想之注解
查看>>
在 Android 设备上搭建 Web 服务器
查看>>
iOS 网络监控框架 - Reachability 源码解读
查看>>
实战PHP数据结构基础之递归
查看>>
eclipse中如何自动生成构造函数
查看>>
使用Java connector消费ABAP系统的函数
查看>>
【iOS开发】iOS10 Log调试小工具
查看>>
C++ 引用和函数的高级特性
查看>>
code-rhythm:写了个vscode扩展,让代码更有快感
查看>>
机器学习常用算法的分类
查看>>
EM算法学习(二)
查看>>
Android 面试系列 Dn.2---- 广播?
查看>>
用Node.js写爬虫,撸羞羞的图片
查看>>
iOS定时器(时间不在于你拥有多少,而在于你怎样使用)
查看>>
JavaScript 算法之复杂度分析
查看>>
玩转webpack4
查看>>
分布式系统:Lamport 逻辑时钟
查看>>
css代码规范工具stylelint
查看>>
传统加密技术
查看>>
把 14 亿中国人都拉到一个微信群在技术上能实现吗?
查看>>