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

Question

我正在使用ajax发布请求来对网站中的供稿进行分页。 在获取发布请求数据时，我正在通过清除先前数据并呈现来自请求的新数据来重新设计页面。 我还希望能够更改URL，因此保存新页面链接将使用户进入当前页面。

例：

1. 网页example.com/feed上的用户-查看第1页的内容
2. 用户单击以转到页面＃2->发送ajax帖子，并使用js更改页面上的数据（不刷新）
3. URL仍为example.com/feed，但内容为example.com/feed?page=2

如何设置URL指向新页面而不触发刷新（无重定向）？

我正在使用Nodejs + express。

Answer 1

您可以使用历史记录pushstate，但某些浏览器不支持。

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

而且不要忘了window.onpopstate，如果用户单击“后退”按钮，它将弹出。

Answer 2

将用户重定向到锚点。

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

并在您的document.ready中：

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

Answer 3

我了解您的目标是单页应用程序。

虽然保留该URL很好，但请注意，您可能需要不同的URL来直接访问应用程序的不同部分。 尽管如此，您仍可以使用AJAX加载内容并保持流畅的应用程序。 解决方法是使用位置的hash部分。

Sammy.js框架为您提供了一个不错的基础，您可以尝试一下。

Answer 4

我不相信不触发刷新就可以更改URL的查询部分（可能是由于安全问题）。 但是，您可以更改锚，并使用事件侦听器检测何时更改锚。

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

更改锚点以加载新的提要

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

请记住不要使用用作ID的锚，因为这会使浏览器滚动到该元素。