单击“后退”按钮时防止重复提交表单而不破坏页面答案

【问题标题】：Preventing duplicate form submission while not breaking page when clicking Back button单击“后退”按钮时防止重复提交表单而不破坏页面
【发布时间】：2011-03-30 14:23:27
【问题描述】：

我有一个页面，其中包含一个我试图防止重复提交的表单，这相当简单（如果有人好奇，我使用了这个

$("form").submit(function()
{
    setTimeout(function()
    {
        $("input").attr("disabled", "disabled");
    }, 50);
});

...我从this page 偷来的，它工作正常。正如预期的那样，输入被快速禁用，表单按预期提交，用户被重定向。

这是我的问题：我预计用户有时会使用“后退”按钮而不是页面内导航，因此如果他们单击“后退”按钮，我希望页面能够正常工作。但是，当我在成功发布后单击“后退”按钮时，我会返回到上一页，并且禁用所有输入（您可能已经知道会发生这种情况）。如果他们愿意，我希望他们能够在单击“返回”按钮后使用该页面。

我首先尝试使用 header/meta 标签来告诉浏览器不要缓存页面，但这不起作用（在 Firefox 3.6.8 中） - 然后我决定无论如何我都不想这样做，因为它可能不是跨浏览器兼容的，并且无论如何可能不是最佳实践（here 就是这样一种情况）。我不想像我见过的某些应用程序那样使用“破坏”后退按钮的任何东西（例如，当用户单击它时，它不会将它们带回页面，而是迫使它们留在该页面上)，这对我来说似乎是个坏主意。有谁知道当用户单击“后退”按钮时我可以防止在客户端重复提交表单而不会使页面无用的方法？（以防万一，我使用的是 ASP.NET MVC 1）。

【问题讨论】：

标签： forms input submit back-button

【解决方案1】：

嗯，听起来好像没有其他人想出更好的主意并发布了。我注意到我们自己的 Stack Overflow 具有相同的行为（至少在页面上），禁用了提交按钮，当我单击“返回”时，该按钮仍然被禁用。也许我能做的最好的事情就是禁用按钮，从而迫使他们手动刷新页面，或者（希望）鼓励他们尽可能使用站点导航而不是返回按钮。

不过，如果其他人有更好的想法，我仍然愿意接受。

【讨论】：

【解决方案2】：

为什么不为每个表单创建一个唯一的随机密钥，然后在提交时，将密钥插入数据库，然后如果该密钥已存在于数据库中，则该表单已提交，所以不要再次处理数据...这样您就不会修改 DOM 并且可以确保数据完整性。

【讨论】：

这是防止在服务器上重复处理表单的好主意。不过，我在这个问题背后的想法是，如果可能的话，要阻止客户采取行动。显然我们也必须在后端处理它，但我想尝试阻止任何客户端操作。