как использовать window.history с вызовами ajax - PullRequest
Новая
       35

как использовать window.history с вызовами ajax

0 голосов
/ 24 июня 2019

Я работаю над сайтом электронной коммерции.Пользователи могут искать элемент ... скажем, какой-то пользователь хочет купить iPhone с максимальной ценой = 200 долларов. 

query: iPhone, maxPrice: $200

Теперь система отправляет указанный выше запрос в виде ajax-запроса насервер, сервер выполняет поиск и возвращает результат, который отображается пользователю.

Проблема с подходом заключается в том, что содержимое страницы обновляется, но URL остается тем же ... (т.е. URL-адресне означает, что мы ищем iPhone с maxPrice = 200 долларов США

Итак, я сделал, чтобы обновить URL-адрес после завершения поиска ajax, вызвав эту функцию: 

function updateUrl() {
    var newQuery = $('#filterForm').serialize();
    var newLocation = "";

    if (window.location.protocol) {
        newLocation = window.location.protocol + "//";
    }

    newLocation += window.location.host + window.location.pathname + "?" + newQuery;
    window.history.replaceState("", "search title", newLocation);        
}

Это отлично работает, пользователь меняет критерии поиска, на сервер отправляется новый запрос ajax, отображается результат, а URL обновляется, чтобы показать новые критерии поиска.В этом примере новый URL-адрес будет выглядеть следующим образом: mySite/controller/action?query=iPhone&maxPrice=$200

Единственная проблема заключается в том, что кнопка возврата не работает правильно ... скажем, пользователь запускает запросы:

Запрос-1: mySite/controller/action?query=iPhone&maxPrice=$200

Query-2: mySite/controller/action?query=samsung&maxPrice=$200

Теперь, если пользователь нажмет кнопку «Назад», URL-адрес изменится на Query-1, но результат, отображаемый на странице, не обновляется.Я должен обновить страницу после нажатия кнопки назад, чтобы показать правильный результат.

Есть ли лучший способ (чем обновить страницу после кнопки назад), чтобы добиться этого?

...