避免“撤消”历史记录条目以在表单上按后退按钮

Question

令我惊讶的是，我找不到关于这个主题的任何信息，但是，搜索这些东西总是会产生很多相似但不相关的东西......

总之，一些注意事项避免误解： - 问题是关于 HTML、HTTP、Javascript 和浏览器行为的。我故意不谈论服务器端技术，因为我认为让这部分工作对我来说不是问题。 - 我的目标不是安全，也不想限制用户的行为。事实上，我想改进 UI。

假设我们有一个带有 POST-redirect-GET 表单的 HTML 页面。提交表单会导致服务器端验证，然后是结果或验证错误。现在假设需要几次尝试才能使所有值都有效。尽管我尝试使用更改 URL，但 URL 保持不变。现在用户查看结果，然后想要返回到链接到表单的任何页面。对于一个漂亮的用户界面，这应该需要两次单击后退按钮，一次从结果页面返回到表单，第二次返回到表单之前的页面。但是，用户必须点击过去每次失败的尝试才能输入有效值。

我怎样才能避免这种情况？再次注意，我不想对用户“隐藏”任何东西，只是没有实际情况可以使用无效的表单值。我发现提示“单页应用程序”由于未填写历史记录而出现相关问题，但这实际上是相反的问题，我的应用程序不是“单页应用程序”。

作为避免历史条目的替代方法，我也完全可以以某种方式回避问题，甚至围绕它构建一个良好的用户界面。但是现在，按钮对表单说“返回”（在导航的意义上），但对表单做了“撤消”（在改变值的意义上）。人们希望后退按钮返回——他们已经有 ctrl-z 用于撤消。

直接的解决方案——虽然我找不到类似的东西——将是一个 HTTP 标头，上面写着：“这是您之前请求的相同资源的更新版本，请注意它如何具有相同的 URL，所以不要'后退按钮时不要让它出现两次"。

Answer 1

我认为最简单的方法是使用 ajax 来处理您的表单提交，即使它是一个多部分表单。

我会结合客户端验证以更快地向您的用户提供反馈，然后在您收到来自 ajax 请求的返回数据时处理服务器端验证错误。

使用这种方法，您的浏览器历史记录应该得到相对保留，而不是填写成功/失败表单提交。

我个人喜欢这个客户端引导验证器插件：

https://github.com/1000hz/bootstrap-validator

当我收到服务器返回的错误消息时，我也使用它来更新界面。