Obsługa przycisków nawigacji w przeglądarce z Ajax

Odpowiedz Nowy wątek
2019-08-19 21:15

Rejestracja: 11 miesięcy temu

Ostatnio: 2 miesiące temu

0

Cześć,
tworzę mały projekt, który służy mi jako nauka JavaScript i PHP. Chciałbym stworzyć nawigację, w której będą znajdowały się cztery podstrony do których użytkownik będzie się mógł przenieść bez konieczności przeładowywania całej strony. Tutaj pojawia się pewien problem, który napotkałem. Dane pobieram z pliku JSON, w założeniu będą się tam znajdować 4 kody HTML.
I o ile dane po kliknięciu w link w menu na stronie się prawidłowo wczytują, to o tyle kompletnie nie działają przyciski nawigacyjne w przeglądarce.
Zmienia się jedynie adres na pasku przeglądarki, a zawartość strony jest statyczna.

Poczytałem trochę w internecie i wywnioskowałem, że należałoby skorzystać z History API, jednak nie wiem z której strony to ugryźć. Wiele rozwiązań opiera się na jQuery, a nie chciałbym jednak sięgać po frameworki na obecnym etapie nauki. Może są inne sposoby, aby ogarnąć taką nawigację?

Kod


calculatorBMIbtn.addEventListener('click', getDataFromJsonUI);

   function getDataFromJsonUI(){
    fetch("link_do_json")
    .then(function(response){
        return response.json();
    })
    .then(function(result){
        output = result[0].html;
        userInterfaceBox.innerHTML = output;

    });
}
edytowany 2x, ostatnio: Aircod, 2019-08-19 21:16

Pozostało 580 znaków

2019-08-19 21:37

Rejestracja: 2 lata temu

Ostatnio: 7 minut temu

1

Potrzebujesz modyfikować historię przeglądarki:
https://developer.mozilla.org/en-US/docs/Web/API/History_API
https://css-tricks.com/using-the-html5-history-api/
https://www.rdeeson.com/weblo[...]n-history-with-ajax-and-html5


edytowany 1x, ostatnio: Freja Draco, 2019-08-19 21:38

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0