HTML5中form表单防止重复提交的两种方法

form表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题

(1)点击提交按钮两次。

(2)点击刷新按钮。

(3)使用浏览器后退按钮重复之前的操作 导致重复提交表单。

(4)浏览器重复的HTTP请求。

(5)用户提交表单时可能因为网速的原因,或者网页被恶意刷新,致使同一条记录重复插入到数据库中,这是一个比较棘手的问题。我们可以从客户端和服务器端一起着手,设法避免同一表单的重复提交。

一 .用JavaScript 禁用提交按钮

<script type="text/javascript">
    //设置disabed属性
    $("input[type='submit']").attr("disabled",true);
    或者 $("input[type='submit']").attr("disabled","disabled");
    
    //移除disabed属性
    $("input[type='submit']").attr("disabled",false);
    或者 $("input[type='submit']").attr("disabled","");
</script>

二. 用Session防止表单重复提交:

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

public class FormServlet extends HttpServlet {
    private static final long serialVersionUID = -884689940866074733L;
 
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
 
        String token = UUID.randomUUID().toString();//创建令牌
        System.out.println("在FormServlet中生成的token:"+token);
        request.getSession().setAttribute("token", token);  //在服务器使用session保存token(令牌)
        request.getRequestDispatcher("/form.jsp").forward(request, response);//跳转到form.jsp页面
    }
 
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }
 
}

原创作者:吴小糖

创作时间:2024.1.9

相关推荐

  1. HTML5form防止重复提交方法

    2024-01-13 05:56:01       42 阅读
  2. SpringBoot防止重复提交

    2024-01-13 05:56:01       17 阅读
  3. springboot防止重复提交

    2024-01-13 05:56:01       9 阅读
  4. 002 springboot redis 防止重复提交

    2024-01-13 05:56:01       11 阅读
  5. HTML5元素:重塑数据收集艺术

    2024-01-13 05:56:01       9 阅读
  6. 97、Cell防止复用方法

    2024-01-13 05:56:01       34 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-13 05:56:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-13 05:56:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-13 05:56:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-13 05:56:01       20 阅读

热门阅读

  1. VUE 前端框架学习总结

    2024-01-13 05:56:01       29 阅读
  2. Spring Boot 构建工具插件

    2024-01-13 05:56:01       40 阅读
  3. Web3.0是如何影响未来互联网发展的

    2024-01-13 05:56:01       38 阅读
  4. MAC通过终端,使用python3建立本地Web服务

    2024-01-13 05:56:01       30 阅读
  5. 【算法笔记】贪心专题

    2024-01-13 05:56:01       33 阅读
  6. HTML固定表格宽度

    2024-01-13 05:56:01       32 阅读
  7. vue3中路由守卫的快速上手

    2024-01-13 05:56:01       39 阅读
  8. 杨氏矩阵中的二分查找算法实现

    2024-01-13 05:56:01       37 阅读
  9. 【PostgreSQL】数据查询-选择列表

    2024-01-13 05:56:01       37 阅读