如何防止表单重复提交
编辑：Simone
2025-03-01 23:48:58
599 阅读
通常我们遇到重复提交表单的情况有这些：
双击提交按钮，多次重复点击同一个按钮；
F5刷新页面；
按Backspace后退按钮也会导致重复提交表单；
浏览器历史记录重复提交表单；浏览器重复的HTTP请求；
用户提交表单时可能因为网速的原因或者刷新等，数据库中出现重复的数据，这是一个比较棘手的问题，我们可以从客户端和服务器端一起着手，避免表单的重复提交。
下面小编就这些情况给出自己的解决方案！
多次点击同一个提交按钮的情况一（js验证）
点击按钮提交表单的时候，立刻禁用按钮，第二次点击就无效
或者使用变量标记状态，如果正在提交，直接返回，这种用于异步提交的情况中。
多次点击同一个提交按钮的情况一（js+服务端一起验证）
很多情况，客户端JavaScript只是为了用户体验而做的验证，服务端也必须要做好检查和验证工作，避免一些非法请求哦。
按Backspace（js端可以监听键盘按键，过滤掉backspace）
监听window的全局按键，单独处理backspace，取消之
使用Iframe接收表单
其实F5刷新、历史记录，这些通通可以换一种提交方式，一并解决，那就是将表单的target指向一个隐藏的Iframe中，这样浏览器就不会记录该地址，刷新，回车都不会重复提交了。这个方案还是异步无刷新提交表单（包括上传下载文件都可以），Iframe的使用请参考下面这几篇经验。
21iframe内容部分加载慢怎么解决
8如何通过iframe来实现导入导出的效果
版权声明：本站【趣百科】文章素材来源于网络或者用户投稿，未经许可不得用于商用，如转载保留本文链接：https://www.qubaik.com/life/146708.html
