这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
前言
处理提交的表单是web开发中非常重要的一环，能否正确处理用户提交的表单是保证web应用数据是否正确的关键。
举个例子，我们可能会遇到这种情况：在某个带有评论功能的页面下，有的用户发表了两条甚至多条重复的评论，这些评论不仅内容相同，且提交时间都是一模一样，这必然是不符合逻辑的。出现这种情况，说明这个用户重复提交了表单，并且后台并没有进行拦截。
为什么会重复提交表单
下面列出几点用户经常会遇到的场景。
- 表单提交以后，用户并没有根据页面选择相应的功能按钮进行操作，而是刷新了提交以后的页面。
- 网络出现暂时的卡顿，用户提交表单后见无响应，会下意识地多次提交表单。
- 用户提交表单之后，使用了浏览器的后退按键，再一次提交了刚才提交过的表单。
如何防止表单重复提交
- 拿页面开刀，载入带有表单的页面之前先与后台进行校验，检验该用户是否已经提交过表单了，如果是则可以将表单的提交按钮设置为
disabled，防止用户进行点击。 - 从后台下手，在访问带有表单页面之前，在后台生成一个
token，将该token使用一个隐藏域传递到表单当中，当用户提交表单时后台将表单提交过来的token与后台自己生成的token进行校验，校验成功则允许表单的提交。
不过需要注意的，为了防止表单的重复提交，我们在允许上一次表单提交完毕之后需要将服务器端的token清空，这样即使表单提交多少次，后台的token匹配不上，就不会再允许后续表单的提交了。
总结
以上分别从前端和后端两个层面给出了两种防止表单重复提交的方法，但很明显从后端这一层设防才是最终的解决方案，因为仅在前端设防并不能解决表单提交后用户刷新提交后页面或者将页面后退后对表单进行重复提交的问题。
考虑用户体验，我觉得需要两者兼备，如果你不想要用户对表单进行重复提交，那么我们可以在开始的时候就将表单的提交按钮给ban掉，这么做就可以拦截掉很多重复提交的数据，减轻后台服务器处理的压力，同时也能提升用户的体验。
