如何有效防止Chrome浏览器中表单的重复提交问题?

avatar
作者
筋斗云
阅读量:0
可以使用javascript的preventDefault()方法阻止表单的默认提交行为,然后通过ajax等方式提交数据。

在Chrome浏览器中,当使用JavaScript提交表单时,可能会遇到多次提交表单的问题,这一问题主要出现在webkit内核的浏览器中,如Chrome和Safari,以下是详细的解决方法及技巧:

如何有效防止Chrome浏览器中表单的重复提交问题?

问题描述

在使用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();

方法二:禁用提交按钮

如何有效防止Chrome浏览器中表单的重复提交问题?

在表单提交后,将提交按钮设置为不可用状态,以防止用户再次点击提交按钮,代码如下:

 function dosubmit() {     var btnSubmit = document.getElementById("submit");     btnSubmit.disabled = "disabled";     return true; }

相关问题与解答

问题一:为什么只在Chrome浏览器中会出现这个问题?

解答:这个问题主要出现在webkit内核的浏览器中,如Chrome和Safari,这些浏览器为了防止表单被重复提交,采取了一些限制措施,而在其他浏览器如Firefox和IE中,这种问题并不明显。

问题二:除了上述方法,还有哪些防止表单重复提交的方法?

解答:除了上述方法,还可以使用以下几种方法来防止表单重复提交:

如何有效防止Chrome浏览器中表单的重复提交问题?

1、前端利用JavaScript防止表单重复提交:在客户端的js代码中设置一个标识位,第一次提交后将标志位设置成true,后续再点击提交按钮时,检查该标志位是否为true,如果是则不允许提交。

2、利用Session防止表单重复提交:在服务器端生成一个唯一的Token,并将其存储在Session中,在客户端的Form表单中,使用隐藏域来存储这个Token,表单提交时,连同这个Token一起提交到服务器端,服务器端判断客户端提交上来的Token与服务器端生成的Token是否一致,如果不一致,则是重复提交。

3、使用重定向:在表单提交成功后,将用户重定向到另一个页面,而不是原始的表单页面,这样可以避免用户通过浏览器的“后退”按钮或重新加载页面来重复提交表单。

到此,以上就是小编对于“Chrome Form多次提交表单问题的解决方法-javascript技巧”的问题就介绍到这了,希望介绍的几点解答对大家有用,有任何问题和不懂的,欢迎各位朋友在评论区讨论,给我留言。

    广告一刻

    为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!