单击后退按钮后如何防止表单字段重新填充？答案

【问题标题】：How to prevent form fields from repopulating after clicking the back button?单击后退按钮后如何防止表单字段重新填充？
【发布时间】：2013-07-31 23:47:53
【问题描述】：

我有一个简单的表单，其中包含四个字段，分别为名字、姓氏、地址和电话号码。

在用户填写此表单并单击提交按钮后，如果一切正常，我会将该用户重定向到成功页面。

但是从成功页面单击浏览器后退按钮时，表单字段值会重新填充到表单上。我怎样才能防止这种情况发生？

我已经尝试过这段代码：

<cfheader name="cache-control"  value="no-cache, no-store, must-revalidate">
<cfheader name="pragma" value="no-cache">
<cfheader name="expires" value="#getHttpTimeString(now()-1)#">

但它不起作用。

【问题讨论】：

标签： caching browser coldfusion

【解决方案1】：

重新填充表单字段是好的事情，不要再试图破坏它了。

如果您真正想要的是防止重复提交，请将唯一 ID（例如 UUID）与表单一起发送并跟踪您最近收到的那些（要跟踪多少取决于您的应用程序）。

如果您收到重复的内容，您可以忽略它（并显示适当的消息），或者更进一步：检查收到的数据是否已经提交，或者是否尝试更改之前提交的内容（即修正错字)，或创建新记录（可能名字和电话已更改），或提示用户选择，或其他任何方式。

【讨论】：

我完全同意。要问的最大问题是“我的最终目标是什么？”如果您只是想阻止人们重新提交表单，Peter 的建议是一个不错的选择。如果您想阻止人们返回表单，那么您可能想问自己为什么。使用后退按钮更新表单可能是不可取的，但从用户的角度来看，这并非不合理。如果你不想重复提交，你应该在表单提交时检查这个。从个人经验来看，重新编程正常的浏览器行为真的很糟糕。

【解决方案2】：

我知道重新填充 FORM 字段是件好事，但我们可以通过使用禁用它 autocomplete="off"

【讨论】：

autocomplete=off 当你是用户时非常烦人。
autocomplete 属性用于在您第一次访问页面时预填表单（基于您之前填写类似表单的方式），而不是在单击后退按钮时。
是的，我知道，但它也适用于所有浏览器。
chrome 和 firefox 有一个 autocomplete="on" 扩展，可以轻松覆盖这个“修复”
我只对登录表单和信用卡信息使用 autocomplete="off"。一些 PCI 合规性评估需要它。

【解决方案3】：

这在我运行时有效。一、文件testform.cfm

<cfsetting showdebugoutput="no">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0    
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<CFHEADER NAME="Cache-Control" VALUE="no-cache, no-store, must-revalidate">
<!--- this is meant for legacy HTTP 1.0 servers 
- only prevents caching when used with secure communications (https://)  --->
<CFHEADER NAME="Pragma" VALUE="no-cache">
<!--- this doesn't prevent caching, 
just means for future requests that browser must contact server for fresh copy. 
cached copy used for BACK and FORWARD buttons--->
<CFHEADER NAME="Expires" VALUE="-1">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<form action="formtarget.cfm" method="post">
<input type="text" name="x" value="" />
<input name="submitbutton" type="submit" />
</form>
</body>
</html>

这是 formtarget.cfm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0   
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<cfdump var="#form#">
</body>
</html>

我们在自定义标签中有这三个 cfheader 标签。

【讨论】：