Відновлення сторінки отриманої по ajax після відкриття браузера

Є такий код в якому виконується ajax запит, отриманий результат оновлює блок на сторінці і замінює url за допомогою функції pushState

Html cторінка виглядає приблизно таким чином

<html>
    <body>
        <div>
            Блок який постійно залишаються на сторінці
            <a href="/path" class="ajax">отримати дані по ajax і записати в блок #content</a>
        </div>
        <div id="content">
            дані в цьому блоці замінюються ajax запитом
        </div>
        <div>
            Блок який постійно залишаються на сторінці
        </div>
    </body>
</html>

І JS код

window.addListenter('click', '.ajax', ajaxLinkLoad);

function ajaxLinkLoad(event, target) {
    var url = target.getAttribute('href');

    axios.get(url).then(function (response) {
        document.getElmentById('content').innerHTML = response.data;
        window.history.pushState(null, null, url);
    });
    event.preventDefault();
}

Він працює як потрібно, при кліці на посилання отримуються дані по ajax і записуються в блок #content, через pushState також змінюється URL.

Але якщо закрити браузер і потім відкрити, то на відновленій сторінці буде лише блок даних, який був повернутий останнім ajax запитом, тобто лише та частина сторінки яка була в response.data останнього запиту.

Без зміни URL через pushState виводиться остання сторінка яка не була отримана через ajax, але вона ренедериться повністю.

В чому тут проблема?

Alex · 7 місяців тому

Коментарі (3)

  1. Костя Третяк
    7 місяців тому

    Питання потрібно спростити і доповнити. Не чітко зрозуміло що є, і що повинно бути на сторінці.

    1
    1. Alex
      7 місяців тому

      Сторінка виглядає приблизно таким чином

      <html>
          <body>
              <div>
                  Блок який постійно залишаються на сторінці
                  <a href="/path" class="ajax">отримати дані по ajax і записати в блок #content</a>
              </div>
              <div id="content">
                  дані в цьому блоці замінюються ajax запитом
              </div>
              <div>
                  Блок який постійно залишаються на сторінці
              </div>
          </body>
      </html>

      І JS код

      window.addListenter('click', '.ajax', ajaxLinkLoad);
      
      function ajaxLinkLoad(event, target) {
          var url = target.getAttribute('href');
      
          axios.get(url).then(function (response) {
              document.getElmentById('content').innerHTML = response.data;
              window.history.pushState(null, null, url);
          });
          event.preventDefault();
      }

      Він працює як потрібно, при кліці на посилання отримуються дані по ajax і записуються в блок #content, через pushState також змінюється URL.

      Але якщо закрити браузер, а потом відкрити, на сторінці буде лише частина html коду яка була в блоці #content

      Сподіваюся я зрозуміло пояснив.

      PS. В момент відкриття браузера запит на сервер не відсилається, я перевіряв. Це саме браузер так відновлює сторінку залишаючи на ній лише ту частину що була отримана в останньому запиті.

      1
      1. Костя Третяк
        7 місяців тому

        О, це вже значно краще. Тепер залишилось замінити текст у початковому запитанні. Я пішов туди відповідати.

        1
Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація