如何防止表单重复提交

作者:如沐春风 | 创建时间: 2023-04-18
通常我们遇到重复提交表单的情况有这些: 双击提交按钮,多次重复点击同一个按钮; F5刷新页面; 按Backspace后退按钮也会导致重复提交表单; 浏览器历史记录重复提交表单;浏览器重复的HTTP请求; 用户提交表单时可能因为网速的原因或者...
如何防止表单重复提交

操作方法

多次点击同一个提交按钮的情况一(js验证) 点击按钮提交表单的时候,立刻禁用按钮,第二次点击就无效 或者使用变量标记状态,如果正在提交,直接返回,这种用于异步提交的情况中。

多次点击同一个提交按钮的情况一(js+服务端一起验证) 很多情况,客户端JavaScript只是为了用户体验而做的验证,服务端也必须要做好检查和验证工作,避免一些非法请求哦。

按Backspace(js端可以监听键盘按键,过滤掉backspace) 监听window的全局按键,单独处理backspace,取消之

使用Iframe接收表单 其实F5刷新、历史记录,这些通通可以换一种提交方式,一并解决,那就是将表单的target指向一个隐藏的Iframe中,这样浏览器就不会记录该地址,刷新,回车都不会重复提交了。这个方案还是异步无刷新提交表单(包括上传下载文件都可以),Iframe的使用请参考下面这几篇经验。

温馨提示

如果小编的对您有所帮助,请帮忙点赞,谢谢!
点击展开全文

更多推荐