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

Question

我有一个表格。提交成功后，有服务器端重定向查看新条目。

问题：按下后退按钮后，所有输入仍然填充最后的值（它不会自动重新提交表单或显示“确认表单提交”提示）。这允许用户再次手动单击“提交”并非常轻松地提交重复条目，这是我想要避免的。请注意，这不是经典的“repost”问题，我们使用的是 post/redirect/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" />

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

这些都不起作用，在点击后退按钮后字段仍然被填充。最后一个选项实际上触发了“确认表单提交”提示，这不是我想要的，但至少好一点。

我应该提到这是在谷歌浏览器中。如果有帮助，可以使用 Codeigniter 和 jQuery。我只想在用户点击后退按钮后清除表单字段，然后发布成功的条目。我实际上不记得以前有过这个问题，而且我完全没有想法。这样做的正确方法是什么？

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 调用进行提交，所以没有理由不这样做。