在开发中,如果一个新增或修改的表单,在后台完成数据库操作后我们设定的不是跳转到其他页面,还是返回本页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交,即这条记录会被增加或修改两次。
导致表单重复提交的原因是:第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其他页面时才消失。在自调用返回时,内存中的数据依然在,这时页面中的判断提交的代码依然可以检测到提交的值,顾会产生重复提交的效果。
可以用以下几个办法解决:
方法1:最简单:页面提交后转到另一个页面而不是本页面,举个栗子,比如你的页面地址为
http://yourdomain.com/User/Index/login
则该页面的表单action地址可以为另外的处理地址,如
<form action="{:U('User/Index/check_login')}" method="post">
这样报错返回,或者用户点击回退按钮,还是会回到上一个地址,不过这种情况也不保险。还要搭配方法2,一起比较保险
方法2:提交表单后提交按钮变灰/隐藏提交按钮
这种方式一般是结合方法1来做的,通过JS来动态监听用户的点击动作,动态将按钮属性置成disabeld,即为灰色不可用。代码如下:
HTML:
<form action="{:U('User/Index/check_login')}" method="post">