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

简介: 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);
    }
 
}


相关文章
|
22天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
1月前
html中div内容居中的方法使用弹性盒子居中
html中div内容居中的方法使用弹性盒子居中
8 0
|
2月前
|
数据安全/隐私保护
HTML 表单和输入
HTML 表单和输入。
13 3
|
11天前
HTML_表单标签
HTML_表单标签
15 0
|
8天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
13 0
|
12天前
|
移动开发 前端开发 JavaScript
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
《HTML 简易速速上手小册》第8章:HTML 表单高级技术(2024 最新版)
28 0
|
12天前
|
移动开发 JavaScript 前端开发
《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)
《HTML 简易速速上手小册》第4章:HTML 的表单与输入(2024 最新版)
32 0
|
13天前
|
移动开发 开发者 HTML5
html声明方法
【4月更文挑战第18天】html声明方法
24 1
|
14天前
|
JavaScript 前端开发 数据安全/隐私保护
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
HTML中表单元素和表格元素分别是什么,有什么区别,列举几个代码
9 0
|
16天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
在JavaScript中,有五种主要方法选取HTML元素:1) `getElementById` 通过id选取单个元素;2) `getElementsByClassName` 选取具有特定类名的所有元素;3) `getElementsByTagName` 选取特定标签的所有元素;4) `querySelector` 使用CSS选择器选取单个元素;5) `querySelectorAll` 选取匹配CSS选择器的所有元素。这些方法结合使用可精确地定位到DOM树中的目标元素。
12 1