防止表单字段在点击后退按钮后重新填充

Question

我有一个表单。在成功提交后，会进行服务器端重定向以查看新条目。

问题：当用户点击后退按钮时，所有输入仍然填充有上一次的值（它不会自动重新提交表单或显示“确认表单提交”提示）。这使得用户可以手动再次单击“提交”，并非常容易地提交重复条目，这是我想要避免的。请注意，这不是经典的“重新发布”问题，我们正在使用POST/重定向/GET模式。

表单中有20多个字段，从技术角度讲，可能存在两个相同的条目是合法的，但我只希望在用户按下后退按钮时清除字段。

这是我尝试过的：

禁用缓存头信息

header('Cache-Control: must-revalidate, no-store, no-cache, private, max-age=0');
header('Pragma: no-cache');
header('Expires: Sat, 26 Jul 1997 05:00:00 GMT');

无缓存元标记的组合

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />

Submitting and redirecting with javascript

$('form').submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), function(response){
        window.location = response.redirectUrl;
    });
});

提交表单后的“刷新”重定向

header('refresh:0; url=view_entry'); 

由会话数据触发的刷新

// psuedo PHP code for the "add" page
if ($_SESSION['submit']) {
    $_SESSION['submit'] = 0;
    redirect(current_url); // Cross fingers and hope this clears the form
}
if ($formValid and $saveEntry) {
    $_SESSION['submit'] = 1;
    redirect(next_url);
}

所有方法都无效，点击后退按钮后表单字段仍然被填充。最后一个选项实际上会触发“确认表单提交”的提示，这不是我想要的，但至少好了一点。

我应该提到这是在Google Chrome中。如果有Codeigniter和jQuery可用，我只想在用户成功提交后，点击后退按钮时清除表单字段。我实际上不记得以前有过这个问题，而且我已经没有任何想法了。什么是正确的做法？

- Wesley Murch

---

就我所知，我尝试启用Codeigniter的CSRF保护，但是一些方式会在返回按钮上重新生成nonce，因此它没有帮助... - Wesley Murch

浏览器怎么可能重新生成CSRF令牌却不清除表单值呢？！ - stormdrain

浏览器为什么在提交/重定向后仍然保留字段值？ - Wesley Murch

Answer 1

一个快速且简单的方法是在响应后和重定向前逐个清除字段。

$('form').submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), function(response){
        // HERE, clear the fields like...
        $("#field_id_1").val('');
        $("#field_id_2").val('');
        // THEN do the redirect
        window.location = response.redirectUrl;
    });
});

这可能不是最全面的解决方案，但既然您已经使用ajax调用提交数据了，那么没有理由不这样做。

- NappingRabbit

---

我刚刚读到表格中有20多个条目。使用类似于getElementsByName的东西然后循环遍历它们可能是可取的，而不是逐个清空它们。但方法相同。 - NappingRabbit

我本希望有一个更加稳定的解决方案，但我会尝试这个。通过ajax提交已经有点像是一种hack方法了。 - Wesley Murch

实际上这个方法是可行的，所以你有我的支持，但是我不确定我想要使用这个解决方案。 - Wesley Murch

我现在几乎所有的提交都是通过ajax完成的。没有什么理由不这样做。您可以在用户离开表单网站之前进行客户端和服务器端验证。然后，您当然可以更改表单元素以帮助他们纠正任何错误并让他们重试。我通常不会重定向，而是通常会在包含表单的“div”中显示提交消息（替换表单）。不过我想也没有不重定向的理由。 - NappingRabbit