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

How to change URL path when paging using ajax + jQuery

本文关键字：分页 路径 URL jQuery ajax      更新时间：2023-09-26

我使用ajax post请求在我的站点上对提要进行分页。当获得post请求数据时，我正在通过清除以前的数据并呈现来自请求的新数据来改造页面。我希望能够改变URL，以及保存新的页面链接将获得用户到当前页面。

的例子:

  1. 用户在example.com/feed页-查看第1页的内容
  2. 用户点击进入页面#2 -> ajax post被发送，页面上的数据使用js(无刷新)更改
  3. 网址仍为example.com/feed，但内容为example.com/feed?page=2

如何设置URL指向新页面而不触发刷新(不重定向)?

我使用Nodejs + express.

我明白你的目标是单页应用程序。

虽然保留url很好，但请注意，您可能希望使用不同的url来直接访问应用程序的不同部分。不过，您仍然可以使用AJAX加载内容，并保持应用程序的流畅性。方法是使用位置的hash部分。

Sammy.js框架为您提供了一个很好的构建基础，您可以尝试一下。

您可以使用历史推送状态，但有些浏览器不支持。

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

别忘了窗户。Onpopstate，当用户点击后退按钮时弹出

将用户重定向到锚点。

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

在你的文档中。ready:

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

我不相信在不触发刷新的情况下改变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的锚，因为这会使浏览器滚动到该元素。

相关文章：