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

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

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

(2)点击刷新按钮。

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

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

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

一 .用JavaScript 禁用提交按钮

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域中存储的标识号。

javascript 复制代码
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 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
huabuyu1 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z2 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行2 小时前
Android 15边到边模式
前端
源猿人2 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾2 小时前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
最后一个农民工2 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
xw52 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !3 小时前
uni-app中v-if使用”异常”
前端·uni-app