现在的 web 应用基本都是用表单来提交数据,在正常情况下,是木有任何问题的 ,但是在某些不正常情况下,表单就会被多次提交。
1
为什么会多次提交
1. 由于网络延迟,用户连续多次点击提交按钮。
2. 由于网络延迟,迟迟没有返回结果,用户直接刷新页面。
3. 表单提交成功以后,直接点击浏览器上后退按钮,不刷新页面,然后点击提交按钮再次提交表单。
2
多次提交的危害
1. 浪费网络资源。
2. 浪费服务器资源。
3. 数据库会产生多条数据记录,致使数据错乱。
3
解决方案
我们先来梳理下表单提交的流程,首先客户端请求获取表单页,然后用户填写数据,点击提交按钮,服务器接收并入库。那么我们就可以分别从客户端、服务端、数据库分别来处理这个 bug。
1. 用户提交完成之后,直接使用 JS 使提交按钮 disable,但是如果客户端禁止掉 JS 就无效了。
2. 提交完成之后客户端重定向到目标页面。这能避免用户刷新导致的重复提交,也能消除按浏览器后退按钮导致的同样问题。
3. Token 机制。客户端获取表单页时服务端生成一个随机字符串 token,存放在 session 中,同时存放在表单的隐藏域中,服务器接收到表单数据时,检查 token 是否跟 session 中的一致,若一致 ,则从 session 中清除,然后正常处理数据;如果不一致,则是重复提交,不予处理。
4. 数据库添加唯一约束或者做唯一索引,防止出现重复数据,最有效的方法。
领取专属 10元无门槛券
私享最新 技术干货