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);
    }
 
}

原创作者:吴小糖

创作时间:2024.1.9文章来源地址https://www.toymoban.com/news/detail-814766.html

到了这里,关于HTML5中form表单防止重复提交的两种方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 防止重复提交请求

    前景提要: ts 简易封装 axios,统一 API 实现在 config 中配置开关拦截器 axios 实现请求 loading 效果 用一个数组保存当前请求的 url,此时还未响应。如果再次发起同样请求,比对 url 发现已经存在数组中,则拦截请求,提示重复提交。当该请求响应结束后,就将 url 从数组中剔除

    2024年02月06日
    浏览(36)
  • java防止重复提交的方法

      为了防止重复提交,可以采用以下几种方法: 1. 令牌机制(Token) 在表单中添加一个隐藏字段,用于存放一个随机生成的令牌(Token)。当用户提交表单时,将令牌一起提交到服务器。服务器接收到请求后,首先检查令牌是否存在,如果不存在则拒绝请求;如果存在,则将

    2024年02月01日
    浏览(36)
  • 微信小程序防止重复提交

    微信小程序在真机测试时,遇到这样一种情况:当网络条件差或卡顿的情况下,进行某项操作时,使用者会认为点击无效而进行多次点击,致使多次跳转页面或多次上传同一表单,导致函数或接口被多次调用,实际上使用者只想调用函数和接口一次。 添加节流阀,即按下按钮

    2024年02月13日
    浏览(47)
  • SpringBoot 整合redis + Aop防止重复提交 (简易)

    redis下载 解压 安装 看一下就会有  进入redis-6.0.8下的src目录 (  src 目录下有编译后的 redis 服务程序 redis-server,还有用于测试的客户端程序 redis-cli:) 然后启动 redis默认端口号 6379,建议更改。redis.conf是配置文件在  与src是同级目录。 要远程  #去掉保护模式,注释掉bi

    2024年02月12日
    浏览(37)
  • form表单提交数据如何拿到返回值

    使用form表单提交参数的时候,是依据input框里面的name值传给后端的,只需在form节点添加action以及提交方式就可以调通前后端。但是这种直接的操作是不能够判断接口是否调通的,是拿不到返回值的。这就意味着不能够做对应的操作。 1:引入jquery.form.js的插件,这是一个jqu

    2024年02月06日
    浏览(75)
  • 微信小程序的form表单提交

    第一:bindsubmit方法 注意: 1.使用form里面定义bindsubmit事件 2.bindsubmit事件需要配合button里面定义的formType=“submit” 操作 3.设置input的name值来获取对应的数据 通过e.detail.value获取数据, 其中包含input的value值 第二种:bindinput方法 注意: 1.在input框内使用bindinput属性的方式定义事件

    2024年02月11日
    浏览(35)
  • 记录一下verilog重复例化的两种方式

    0 前言 这段时间例化了挺多mem,过程中也了解到了一些新的东西,在这里记录一下 1 for循环方式例化方法 先给出 sub_module 要将这个module分别例化成 u_sub_0 和 u_sub_1 ,并且每个都例化四次 for循环的实现方式如下 来看看例化后的效果 可以看到,总共4组inst,每组inst中存在两个

    2024年02月11日
    浏览(41)
  • ant.design(简称antd)中Form表单组件提交表单、表单数据效验、表单自定义效验、表单布局集合

            ant.design(简称antd)现在我们使用较为广泛,web端中后台表单使用非常广泛,此遍文章集合了表单日常用法及使用注意事项。         下图是UI目标样式图                           1、以下是一个组件,首先引入ant相关依赖,在引入react相关依赖,主要使用了For

    2024年02月13日
    浏览(54)
  • HTML5-4-表单

    HTML 表单用于收集用户的输入信息,表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如: 文本域(textarea) 、 下拉列表(select) 、 单选框(radio-buttons) 、

    2024年02月09日
    浏览(32)
  • Git提交代码仓库的两种方式

    目录 一: 两种本地与远程仓库同步 1 git 远程仓库 提交本地版本库操作 提交到远程版本库操作 1.Git 全局设置: 2.增加一个远程仓库地址 3.查询当前存在的远程仓库 5.本地版本库内容提交到远程仓库 6.查询远程仓库 注意:本地版本库提交到远程仓库用户名密码存放位置 远程仓库

    2023年04月14日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包