在Chrome浏览器中,当使用JavaScript提交表单时,可能会遇到多次提交表单的问题,这一问题主要出现在webkit内核的浏览器中,如Chrome和Safari,以下是详细的解决方法及技巧:
问题描述
在使用JavaScript提交表单时,如果表单的action
属性没有改变,第二次提交可能没有任何响应,这主要是因为webkit内核浏览器为了防止表单被重复提交而采取的一种机制。
解决方案
方法一:改变表单的action
属性
通过为表单的action
属性添加一个随机参数,可以改变表单的响应地址,从而绕过浏览器的限制,具体实现如下:
document.frmOrder.action = 'http://www.abc.com/d.aspx?r=' + Math.random(); document.frmOrder.method = 'POST'; document.frmOrder.target = '_blank'; document.frmOrder.submit();
方法二:禁用提交按钮
在表单提交后,将提交按钮设置为不可用状态,以防止用户再次点击提交按钮,代码如下:
function dosubmit() { var btnSubmit = document.getElementById("submit"); btnSubmit.disabled = "disabled"; return true; }
相关问题与解答
问题一:为什么只在Chrome浏览器中会出现这个问题?
解答:这个问题主要出现在webkit内核的浏览器中,如Chrome和Safari,这些浏览器为了防止表单被重复提交,采取了一些限制措施,而在其他浏览器如Firefox和IE中,这种问题并不明显。
问题二:除了上述方法,还有哪些防止表单重复提交的方法?
解答:除了上述方法,还可以使用以下几种方法来防止表单重复提交:
1、前端利用JavaScript防止表单重复提交:在客户端的js代码中设置一个标识位,第一次提交后将标志位设置成true,后续再点击提交按钮时,检查该标志位是否为true,如果是则不允许提交。
2、利用Session防止表单重复提交:在服务器端生成一个唯一的Token,并将其存储在Session中,在客户端的Form表单中,使用隐藏域来存储这个Token,表单提交时,连同这个Token一起提交到服务器端,服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致,如果不一致,则是重复提交。
3、使用重定向:在表单提交成功后,将用户重定向到另一个页面,而不是原始的表单页面,这样可以避免用户通过浏览器的“后退”按钮或重新加载页面来重复提交表单。
到此,以上就是小编对于“Chrome Form多次提交表单问题的解决方法-javascript技巧”的问题就介绍到这了,希望介绍的几点解答对大家有用,有任何问题和不懂的,欢迎各位朋友在评论区讨论,给我留言。