使用post-redirect-get的自我更新表单的历史记录损坏

Question

我有一个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
• /books/ulysses
• /books/ulysses

因此，当用户按下“后退”时，他们不会返回/books，他们只是刷新当前页面。是否有非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

Answer 1

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

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

window.history.go(0);

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