Разбитая история для самообновляющейся формы с использованием post-redirect-get - PullRequest
8 голосов
/ 14 марта 2019

У меня есть 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 способ обработки случая обновления, чтобы кнопка «Назад» имела ожидаемое поведение? И если нет, то какой способ 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

1 Ответ

0 голосов
/ 23 марта 2019

В JavaScript для изменения поведения кнопки «назад» можно использовать history API

Вот быстрый способ перейти на первую страницу стека истории. Просто добавьте прослушиватель событий для кнопки «Назад» и используйте API истории.

window.history.go(0);

Посмотрите на API: https://developer.mozilla.org/en-US/docs/Web/API/History_API

...