javascript - Using AJAX to change div content - how do I display navigation as hashanchor - Stack Overflow

admin管理员组

文章数量:1342529

I want to create a page that refreshes content within a div async alongside providing a user with an anchor to enable direct access to the content within the div. (e.g. www.website.co.uk/#page1)

I've managed to make it so that the content can be updated for 1 page, however, if I add multiple pages it stops working

Additionally - if I was to navigate to the URL website.co.uk/#page1 it wont display #page1.

Can anyone help?

This is my current code:

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>

I want to create a page that refreshes content within a div async alongside providing a user with an anchor to enable direct access to the content within the div. (e.g. www.website.co.uk/#page1)

I've managed to make it so that the content can be updated for 1 page, however, if I add multiple pages it stops working

Additionally - if I was to navigate to the URL website.co.uk/#page1 it wont display #page1.

Can anyone help?

This is my current code:

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>

• javascript
• jquery
• html
• ajax

Share Improve this question Follow edited Jul 6, 2016 at 9:00 David Smith asked Jul 1, 2016 at 13:10 David SmithDavid Smith 30322 gold badges33 silver badges1616 bronze badges 2

• I've added Shillys Answer underneath, however, if I was to navigate directly to a page (e.g. www.website.co.uk/#page1) it doesnt display the content needed – David Smith Commented Jul 6, 2016 at 9:01
• Have you placed a ma after each route but the last? The routes object you show here, is invalid, which the debugger should tell you. Are the urls to the other pages correct and is the ajax call returning the correct html? – Shilly Commented Jul 6, 2016 at 11:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6 +25

You made some small js errors. So here is you fixed code

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();
  });

You usually use a router-like object for this. Instead of the hyperlink you're using, set the href to the actual page hash <a href="#page1">Button Title</a>. Then create an event listener for the hashchange on the window object where you will fetch the content.

And finally add a list of webpages you want to be able to navigate to, so you can translate '#page1' to the actual url.

The result is that you can use simple hrefs in your hyperlinks and the current page will be shown in the url bar at the top.

ps: add a check into the hashchange listener for routes that aren't listed, so you can still link to offsite pages as well.

pps: If you want to be able to directly navigate to a page, you'll need to add a manual check of the hash at document load.

// 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();    
});

Updated with a load listener:

// 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();
});

since you have tagged the question with jquery, iassume you have jQuery available, in this case you could do something like:

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

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

But please be aware that there are a lot more sophisticated solutions out there

I given directly on onclick its working. It may help you.

<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>

I used .html for pages for check. You use your own.

本文标签： javascriptUsing AJAX to change div contenthow do I display navigation as hashanchorStack Overflow