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

Question

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

查看图片（来自chrome）：

对话框的文字为：

  

您正在寻找的页面使用
  您输入的信息。回到那个   页面可能会导致您采取的任何行动   重复。你想继续吗？

我希望此对话框不显示。

Answer 1

编辑：自从我最初发布这个答案以来已经过去几年了，尽管我得到了一些赞成，但我对之前的答案并不满意，所以我完全重做了。我希望这会有所帮助。

---

何时使用GET和POST：

摆脱此错误消息的一种方法是使表单使用 GET 而不是 POST 。请记住，并非总是适当的解决方案（请参阅下文）。

如果您正在执行不想重复的操作，传输敏感信息或表单包含文件上传或所有数据的长度，请始终使用POST 发送时间超过~2000 characters。

何时使用POST的示例包括：

• 登录表单
• 联系表格
• 提交付款表
• 添加，编辑或删除数据库中条目的内容
• 图像上传器（注意，如果使用带有GET字段的<input type="file">，则只会将文件名发送到服务器，其中99.73％的时间不是您想要的。）
• 包含多个字段的表单（如果使用GET，则会创建一个长URL）

在任何这些情况下，您都不希望人们刷新页面并重新发送数据。如果您要发送敏感信息，使用GET不仅不合适，这将是一个安全问题（即使表单是由AJAX发送），因为敏感项目（例如用户的密码）是在URL，因此将显示在服务器访问日志中。

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

示例包括：

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

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

如果您使用POST：

对我而言，在大多数情况下，即使弹出“确认表单重新提交”对话框，也会显示存在设计缺陷。由于POST被用于执行破坏性操作的本质，Web设计人员应该通过意外（或有意）刷新页面来防止用户多次执行它们。许多用户甚至不知道这个对话的含义，因此只需点击“继续”即可。如果那是在“提交付款”请求之后怎么办？付款是否会再次发送？

那你做什么？幸运的是，我们有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";
}

Answer 2

它与您的表单或其中的值无关。它被浏览器触发，以防止用户使用缓存数据重复相同的请求。如果您确实需要启用结果页面的刷新，则应该通过PHP（header('Location:result.php');）或您正在使用的其他服务器端语言重定向用户。元标记解决方案也应该用于在刷新时禁用重新发送。

Answer 3

我遇到了这个问题，并将此JavaScript添加到了页面的底部（在https://www.webtrickshome.com/faq/how-to-stop-form-resubmission-on-page-refresh上进行了阅读），它似乎可以正常工作。解决方案似乎简单得多。有什么缺点吗？

<script>
if ( window.history.replaceState ) {
  window.history.replaceState( null, null, window.location.href );
}
</script>

谢谢

doug

Answer 4

处理完POST页面后，将用户重定向到同一页面。

在     http://test.com/test.php

header('Location: http://test.com/test.php');

这将删除该框，因为刷新页面不会重新提交数据。

Answer 5

我的情况是我无法使用上述任何答案。我的案例涉及使用搜索页面，用户将获得＆＃34;确认表格重新提交＆＃34;如果在导航到任何搜索结果后单击后退。我编写了以下javascript来解决这个问题。它不是一个很好的解决方案，因为它有点眨眼，它不能在IE8或更早版本上工作。尽管如此，对于处理这个问题的人来说，这可能是有用的或有趣的。

jQuery(document).ready(function () {

//feature test
if (!history)
    return;

var searchBox = jQuery("#searchfield");

    //This occurs when the user get here using the back button
if (history.state && history.state.searchTerm != null && history.state.searchTerm != "" && history.state.loaded != null && history.state.loaded == 0) {

    searchBox.val(history.state.searchTerm);

    //don't chain reloads
    history.replaceState({ searchTerm: history.state.searchTerm, page: history.state.page, loaded: 1 }, "", document.URL);

    //perform POST
    document.getElementById("myForm").submit();

    return;
}

    //This occurs the first time the user hits this page.
history.replaceState({ searchTerm: searchBox.val(), page: pageNumber, loaded: 0 }, "", document.URL);

});

Answer 6

您可以尝试在jQuery中使用AJAX调用。就像youtube如何在不刷新的情况下添加您的评论。这将消除刷新总体的问题。

您需要通过ajax调用发送必要的信息。
我将以youtube评论为例。

$.ajax({
    type: 'POST',
    url: 'ajax/comment-on-video.php',
    data: {
        comment: $('#idOfInputField').val();
     },
    success: function(obj) {
        if(obj === 'true') {
            //Some code that recreates the inserted comment on the page.
        }
    }
});

您现在可以创建文件comment-on-video.php并创建类似以下内容的文件：

<?php
    session_start();

    if(isset($_POST['comment'])) {
        $comment = mysqli_real_escape_string($db, $_POST['comment']);
        //Given you are logged in and store the user id in the session.
        $user = $_SESSION['user_id'];

        $query = "INSERT INTO `comments` (`comment_text`, `user_id`) VALUES ($comment, $user);";
        $result = mysqli_query($db, $query);

        if($result) {
            echo true;
            exit();
        }
    }
    echo false;
    exit();
?>

Answer 7

此方法对我来说效果很好，我认为最简单的方法是在重新加载的页面的HTML中使用此javascript代码。

<script>
if ( window.history.replaceState ) {
  window.history.replaceState( null, null, window.location.href );
}
</script>

Answer 8

我发现了一种非常规的方法来实现这一目标。

只需将脚本页面放入iframe中即可。这样做可以刷新页面，甚至在较旧的浏览器上也可以刷新，而不会出现“确认表单重新提交”消息。

Answer 9

我遇到了同样的问题，

这对我有用，

echo("<script>location.href = 'http://localhost/pagename.html';</script>");

Answer 10

您似乎正在寻找Post/Redirect/Get模式。

作为另一种解决方案，您可以停止使用重定向。

您可以在没有POST确认提醒的情况下立即处理并呈现处理结果。您应该只是操纵浏览器历史记录对象：

history.replaceState("", "", "/the/result/page")

请参阅full或short答案

Answer 11

快速解答

使用不同的方法加载表单并保存/处理表单。

示例。

  

Login.php

在Login/index加载登录表单 验证登录Login/validate

成功完成

将用户重定向到User/dashboard

失败时

将用户重定向到login/index