Использование AJAX для изменения содержимого div - как отображать навигацию как хэш/якорь

Я хочу создать страницу, которая обновляет содержимое в асинхронном режиме div, предоставляя пользователю привязку для прямого доступа к содержимому в div. (например, www.website.co.uk/#page1)

Мне удалось сделать так, чтобы контент можно было обновить для 1 страницы, однако, если я добавлю несколько страниц, он перестанет работать

Дополнительно - если бы я должен был перейти к URL-адресу website.co.uk/#page1, он не отобразил # page1.

Может ли кто-нибудь помочь?

Это мой текущий код:

HTML:

<h5> <a href="#page1">Test</a></h5>
<h5> <a href="#page2">Test2</a></h5>

JS:

<script type="text/javascript">
    var routes = {
        '#page1' : '{{site.url}}/page1'
        '#page2' : '{{site.url}}/page2'
    };
    var routeHandler = function( event ) {
        var hash = window.location.hash, 
            xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("div1").innerHTML = xhttp.responseText;
            }
        };
        xhttp.open("GET", routes[hash], true);
        xhttp.send();    
    };
    window.addEventListener('hashchange', routeHandler);
    window.addEventListener('load', function() {
        var hash = window.location.hash;
        if (routes.hasOwnProperty(hash)) routehandler();
    });
</script>

Ответ 1

Вы сделали небольшие ошибки js. Итак, вот вам фиксированный код

HTML

<h5> <a href="#page1">Test</a></h5>
<h5> <a href="#page2">Test2</a></h5>
<div id="div1"></div>

JavaScript:

  //change these routs
  var routes = {
    '#page1': '/page1.html',
    '#page2': '/page2.html'
  };

  var routeHandler = function() {

    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        document.getElementById("div1").innerHTML = xhttp.responseText;
      }
    };

    xhttp.open("GET", routes[window.location.hash], true);
    xhttp.send();

  };

  window.addEventListener('hashchange', routeHandler);
  window.addEventListener('load', function() {
    var hash = window.location.hash;
    if (routes.hasOwnProperty(window.location.hash)) routeHandler();
  });

Ответ 2

Обычно для этого используется объект, подобный маршрутизатору. Вместо используемой гиперссылки установите href на фактическую хэш-страницу страницы <a href="#page1">Button Title</a>. Затем создайте прослушиватель событий для hashchange в объекте window, где вы будете извлекать контент.

И, наконец, добавьте список веб-страниц, на которые вы хотите перейти, чтобы вы могли перевести '# page1' на фактический URL.

В результате вы можете использовать простые hrefs в ваших гиперссылках, и текущая страница будет отображаться в верхней строке заголовка.

ps: добавьте проверку в приемник hashchange для маршрутов, которые не указаны, поэтому вы все равно можете ссылаться на внешние страницы.

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

// html mockup
<a href="#page1">Button Title</a>
// js mockup
var routes = {
    '#page1' : '{{site.url}}/webpage.html'
};

window.addEventListener('hashchange', function( event ) {
    var hash = window.location.hash, // gives you '#page1'
        xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("div1").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("GET", routes[hash], true);
    xhttp.send();    
});

Обновлен с помощью загрузчика:

// html mockup
<a href="#page1">Button Title</a>
// js mockup
var routes = {
    '#page1' : '{{site.url}}/webpage.html'
};
var routeHandler = function( event ) {
    var hash = window.location.hash, // gives you '#page1'
        xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("div1").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("GET", routes[hash], true);
    xhttp.send();    
};
window.addEventListener('hashchange', routeHandler);
window.addEventListener('load', function() {
    var hash = window.location.hash;
    if (routes.hasOwnProperty(hash)) routehandler();
});

Ответ 3

так как вы отметили вопрос с помощью jquery, у вас есть jQuery, в этом случае вы можете сделать что-то вроде:

$(window).on('hashchange', refreshContent);

function refreshContent() {
    $.get(getBaseUrl() + location.hash, function(data) {
         $('#div1').html(data);
    });
}

Но, пожалуйста, имейте в виду, что там есть намного более сложные решения.

Ответ 4

Я дал прямо на onclick свою работу. Это может помочь вам.

<h5> <a href="#page1" onclick="test('#page1')">Test</a></h5>
<h5> <a href="#page2" onclick="test('#page2')">Test2</a></h5>
<div id="div1"></div>

<script type="text/javascript">

    var routes = {
        '#page1' : 'page1.html',
        '#page2' : 'page2.html'
    };
    function test(page) {

        xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                document.getElementById("div1").innerHTML = xhttp.responseText;
            }
        };
        xhttp.open("GET", routes[page], true);
        xhttp.send();    
    }

</script>

Я использовал .html для страниц для проверки. Вы используете свои собственные.