时间戳

首页 > 解决方案 > 使用 post-redirect-get 的自我更新表单的历史记录被破坏

browser-history - 使用 post-redirect-get 的自我更新表单的历史记录被破坏

问题描述

我有一个 URL /books，它列出了一些书籍，以及一个 URL 模式/books/{some-book-title}，它显示了书籍元数据的查看/更新表单。这是一个典型的用户故事，其中用户更正了不正确的作者条目：

GET /books

  <a href="/books/ulysses">Ulysses</a>
  <a href="/books/don-quixote">Don Quixote</a>

GET /books/ulysses

  <form action="/books/ulysses" method="post" enctype="application/x-www-form-urlencoded">
    <input name="author" value="Jamessss Joycessss">
  </form>

POST /books/ulysses FORMDATA author=James+Joyce

  Redirect 303 SEE OTHER location = /books/ulysses

GET /books/ulysses

  <form action="/books/ulysses" method="post" enctype="application/x-www-form-urlencoded">
    <input name="author" value="James Joyce">
  </form>

问题是历史堆栈现在是

这样当用户按下“返回”时，他们不会返回/books，他们只是刷新当前页面。是否有一种非 JavaScript 方法来处理更新案例，以便后退按钮具有预期的行为？如果没有，解决这个问题的javascript方法是什么？

编辑：如果您多次发帖，那就更令人困惑了

GET /books
GET /books/ulysses    author=Jamesss Joycesss
POST author=3  ->  redirect shows author=3
POST author=2  ->  redirect shows author=2
POST author=1  ->  redirect shows author=1
Press back button /books/ulysses shows author=1
Press back button /books/ulysses shows author=2  (!!!)
Press back button /books/ulysses shows author=3  (!!!)
Press back button /books

标签： browser-historyhtml5-historypost-redirect-get

解决方案

修改后退按钮行为的 JavaScript 方法是使用历史API

这是转到历史堆栈中第一页的快速方法。只需为后退按钮添加一个事件侦听器并使用历史 API。

window.history.go(0);

看看 API：https ://developer.mozilla.org/en-US/docs/Web/API/History_API

推荐阅读