如何防止“确认表单重新提交”对话框?

2022-08-30 10:09:55

如何在提交后清理表单中的信息,以便在页面刷新后不显示此错误?

请参阅图片(来自 chrome):

该对话框包含以下文本:

您要查找的页面使用了
您输入的信息。返回到该页面
可能会导致
重复您采取的任何操作。是否要继续?

我希望此对话框不显示。


答案 1

这种方法对我很好,我认为最简单的方法是在重新加载的页面的HTML中使用此javascript代码。

if ( window.history.replaceState ) {
  window.history.replaceState( null, null, window.location.href );
}

答案 2

编辑:自从我最初发布这个答案以来已经有几年了,即使我得到了一些赞成票,我对我之前的答案并不满意,所以我完全重做了它。我希望这有帮助。


何时使用和:GETPOST

摆脱此错误消息的一种方法是使您的表单使用GET而不是POST。请记住,这并不总是一个合适的解决方案(请阅读以下内容)。

如果您正在执行不希望重复的操作,如果正在传输敏感信息,或者您的表单包含文件上载或发送的所有数据的长度超过约 2000 个字符,请始终使用 POST

何时使用的示例包括:POST

  • 登录表单
  • 联系表格
  • 提交付款表单
  • 从数据库中添加、编辑或删除条目的内容
  • 图像上传器(请注意,如果与字段一起使用,则只有文件名才会发送到服务器,99.73%的时间不是您想要的。GET<input type="file">
  • 具有许多字段的表单(如果使用 GET,则会创建一个长 URL)

在上述任何一种情况下,您都不希望用户刷新页面并重新发送数据。如果要发送敏感信息,则使用 GET 不仅不合适,而且会是一个安全问题(即使表单是由 AJAX 发送的),因为敏感项(例如用户的密码)是在 URL 中发送的,因此将显示在服务器访问日志中。

基本上将 GET 用于其他任何操作。这意味着,当您不介意重复时,对于可以提供直接链接的任何内容,当没有传输敏感信息时,当您非常确定您的URL长度不会失控时,以及当您的表单没有任何文件上传时。

示例包括:

  • 在搜索引擎中执行搜索
  • 用于在网站上导航的导航表单
  • 使用随机数或一次性密码执行一次性操作(例如电子邮件中的“取消订阅”链接)。

在这些情况下,POST将完全不合适。想象一下,如果搜索引擎使用POST进行搜索。每次刷新页面时,您都会收到此消息,并且您无法将结果URL复制并粘贴给人们,他们必须自己手动填写表单。

如果您使用 :POST

对我来说,在大多数情况下,即使弹出“确认表单重新提交”对话框也表明存在设计缺陷。由于用于执行破坏性操作的本质,网页设计师应该防止用户通过意外(或故意)刷新页面来多次执行它们。许多用户甚至不知道此对话框的含义,因此只需单击“继续”。如果这是在“提交付款”请求之后呢?付款会再次发送吗?POST

那你该怎么办?幸运的是,我们有Post/Redirect/Get设计模式。用户向服务器提交 POST 请求,服务器将用户的浏览器重定向到另一个页面,然后使用 GET 检索该页面。

下面是一个使用 PHP 的简单示例:

if(!empty($_POST['username'] && !empty($_POST['password'])) {
    $user = new User;
    $user->login($_POST['username'], $_POST['password']);

    if ($user->isLoggedIn()) {
        header("Location: /admin/welcome.php");
        exit;
    }
    else {
        header("Location: /login.php?invalid_login");
    }
}

请注意,在此示例中,即使密码不正确,我仍然会重定向回登录表单。要向用户显示无效的登录消息,只需执行以下操作:

if (isset($_GET['invalid_login'])) {
    echo "Your username and password combination is invalid";
}