表单提交后，在输入中显示新值而不是缓存值

Question

注意：这不是缓存问题，也不是服务器配置错误，也不是浏览器问题。经过仔细调查，我发现问题是由于我的代码中的问题造成的： 很愚蠢，填充字段的选择查询在我的更新查询之前，导致表单始终显示更新之前的值。重新加载后，当然会出现新更新的值，导致我看错了方向。

然而，这个问题很好地概述了面临缓存问题时所有可能的解决方案。

---

我正在构建一个应用程序，其中包含由数据库中的值填充的表单。 用户可以更改表单的输入值。提交后（不是通过 AJAX），新值被保存到数据库并再次显示相同的表单，这次包含新值，直接从数据库加载。但是：我的浏览器（Windows 7 上的 Chrome v27.0.1453.116m）缓存了旧值。仅当我再次导航到我的页面时才会显示新值。

<form id="edit_form" class="form" action="http://the.same.url/" method="post">
  <input type="text" name="example" value="<?php echo $value_from_database; ?>" />
</form>  

我遇到了几种解决方案，但都没有完全解决问题：

• 在表单标签上设置属性autocomplete="off"：这似乎没有效果。
• 在单个输入标签上设置属性autocomplete="off"：即使与上述解决方案结合使用，这也不会产生结果
• 在页面加载时使用 JavaScript 重置表单：这会产生一些结果，但显然不会影响单选按钮和其他按钮。
• 防止通过元标记缓存页面，如下所示：Using <meta> tags to turn off caching in all browsers? 此外，通过 .htaccess 或 php 标头防止缓存无效。
• 按照 Miro Markarian 以下评论的建议，尝试通过向操作 URL 添加随机数来破坏缓存

以下是建议解决方案的概述：Make page to tell browser not to cache/preserve input values

我有哪些选择？如果可能的话，我想避免异步发布我的表单。它开始看起来好像我别无选择。任何意见表示赞赏。

请注意，此行为也会出现在其他浏览器中，例如 IE10。

我的页面标题与表单中一个输入的值相同，并且在提交新值时也不会更改，恕我直言，我们可以确定这是一个缓存问题。

Google Chromes 的 Web Developer 插件显示以下标题：

Pragma: no-cache
Date: Sun, 30 Jun 2013 09:44:12 GMT
Content-Encoding: gzip
Vary: Accept-Encoding
Server: Apache
Transfer-Encoding: chunked
Content-Type: text/html; charset=utf-8
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection: Keep-Alive
Keep-Alive: timeout=15, max=100
Expires: Thu, 19 Nov 1981 08:52:00 GMT

200 OK

Answer 1

您可以通过一些随机字符串更改输入的名称属性并将它们存储在隐藏的输入中。

<form id="edit_form" class="form" action="http://the.same.url/" method="post">
  <input type="text" name="saejfb27982" value="..." />
  <input type="text" name="iuqde37we83" value="..." />
  <input type="hidden" name="associativeArray" value='{"example":"saejfb27982","example2":"iuqde37we83"}'>
</form>  

（由于每次名称都不一样，浏览器将无法匹配任何形式的缓存、自动补全……）

Answer 2

我感觉您的服务器发送304: Not Modified 而不是您通常发送的数据。如果您使用的是 apache，This question 可能会对您有所帮助。

我认为应该这样做（但未经测试）。它应该删除每个请求 php 文件的请求的 If-Modified-Since 标头，强制应用程序发送内容而不是 Not-Modified 状态。

<ifModule mod_headers.c>
<FilesMatch \.php$>
RequestHeader unset If-Modified-Since
</FilesMatch>
</ifModule>

Answer 3

你不能接受吗：

<form id="edit_form" class="form" action="http://the.same.url/" method="post">
 <input type="text" name="example" value="<?php echo $value_from_database; ?>" />
</form> 

并将其更改为：

value="<?php echo if(isset($_POST['example'])):$_POST['example']?$value_from_database; ?>

其中说：提交表单后，查看$_POST 数组中是否已有变量。如果我这样做，请使用该值，如果不是，请从 db 中提取。

您可能需要设置会话变量 ($_SESSION['ex'] = $_POST['example'])，并对上面的代码进行调整

Answer 4

我相信您只是忘记了回显$value_from_database，这反过来又默认返回浏览器的缓存值。您应该使用以下输入元素：

<input type="text" name="example" value="<?php echo $value_from_database; ?>">

虽然这应该得到正确的 $value_from_database，但我不完全确定您为什么仍然无法完全关闭缓存。

Answer 5

this 问题的第一个答案建议添加以下标头以禁用浏览器缓存：

<?php
header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
?>