使用ajax + jQuery分页时如何更改URL路径

Question

I am using ajax post requests for doing paging on a feed in my site. When getting the post request data I am reforming the page by clearing previous data and rendering the new data that came from the request. I want to be able to change the URL as well so saving the new page link will get the user to the current page.

Example:

1. User on page example.com/feed - seeing content of page #1
2. User clicking to get to page #2 -> ajax post is send and data on the page is changed using js (no refresh)
3. URL is still example.com/feed but the content is of example.com/feed?page=2

How can I set the URL to point to the new page without triggering a refresh (no redirect) ?

I am using Nodejs + express.

Answer 1

You can use history pushstate but some browsers does not support.

history.pushState({id: 'SOME ID'}, '', 'myurl.html');

And don't forget about window.onpopstate, it pops if user clicks back button.

Answer 2

Redirect the user to an anchor point.

<a href="#2" onclick="loadPage(2);">Page 2</a>

And in your document.ready:

if (window.location.hash.length > 1){
  var pageNumber = window.location.hash.substring(1);
  loadPage(parseInt(pageNumber));
} else{
  loadPage(0);
}

Answer 3

I understand you are aiming at a single page application.

While keeping the url is nice, note you might want distinct urls for directly accessing different parts of your application. Still, you can load content with AJAX and keep a smooth application. The way to go is using the hash part of the location.

The Sammy.js framework gives you a nice base to build upon, you can try it out.

Answer 4

I don't believe it is possible to change the query part of the URL without triggering a refresh (probably due to security issues). However you may change the anchor and use an event listener to detect when the anchor is being changed.

//Listener
$(window).on('hashchange', function() {
   if(loaction.hash.length > 1) {
      //The anchor has been changed.
      loadPageWithAjax("example.com/feed.php?page=" + location.hash.substring(1));
   } else {
      //Load standard page
      ...
   }
});

Change the anchor to load new feed

<a href="#2">Page 2</a>

Remember to not use an anchor that is used as an id, since this makes the browser scroll to that element.