浏览器：仅使用 JavaScript 防止刷新时重新提交 POST 数据答案

【问题标题】：Browser: Prevent POST data resubmit on refresh using only JavaScript浏览器：仅使用 JavaScript 防止刷新时重新提交 POST 数据
【发布时间】：2018-01-21 05:21:13
【问题描述】：

我知道这里有很多发布/重定向/获取问题。这个有点不同。我找不到解释这个特定 JavaScript 解决方案的答案。

当您通过 POST 提交表单然后点击刷新按钮时，浏览器会提示我重新提交数据。但是这个提示不会出现在 WordPress 后端（启用 JS 时），并且 Post 后没有 Redirect/Get。

我试图在下面的一系列屏幕截图中展示这一点。它显示了第一个 POST 提交，并在页面上打印了 POST 数据，然后刷新导致 GET 没有任何浏览器重新提交提示。

当我禁用 JavaScript 并点击刷新时，我会收到预期的“您要重新提交数据吗？”提示并且刷新会导致第二次 POST。

所以 wordpress 在这里做了一些 JavaScript 魔术，以防止在刷新/返回按钮上重新提交 POST 数据。

谁能告诉我 WordPress 中的代码，它显示了他们如何仅使用 JavaScript 实现这一目标？我什至不知道从哪里开始搜索。

他们对 pushstate 做了什么吗？

谢谢！

【问题讨论】：

如果保存是通过 ajax 查询进行的，任何数量的刷新都不会导致重新提交。这很简单 - POST 是通过 ajax 进行的。您刷新页面，您只是刷新内容，而不是 POST。
感谢@PressingOnAlways，但是 POST 是普通的浏览器提交，而不是通过任何花哨的 ajax/XHR/frame 提交。 $_POST 数据打印在页面上，如果通过 ajax 单独提交，则不会发生这种情况。
启用或不启用 js 的相同 http 请求/响应标头。 chrome 控制台中也没有 XHR 的东西。

标签： javascript wordpress

【解决方案1】：

解决方案：WordPress 在每次页面加载时使用window.history.replaceState。

这可以防止POST 在刷新或返回按钮上再次运行。

漂亮！

此处为非 WordPress 概念证明：https://dtbaker.net/files/prevent-post-resubmit.php

代码是：

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

【讨论】：

在这里找到关于它的 WordPress 讨论：core.trac.wordpress.org/ticket/23367
你太棒了@dtbaker
这是有史以来最伟大的答案！谢谢，工作得很好。
这篇文章确实帮助我避免了这个问题。伟大的！太感谢了。先生。
非常感谢:)