javascript - 使用ajax获取子页面，如何更改url？

Question

我有一个完整的页面，其中有这样的菜单:

<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>

等等。这在没有 jQuery 的情况下工作得很好，但因为我想要一些侧面变化的动画效果，所以我决定使用 jQuery，例如:

$(document).ready(function(){
    $('a').click(function(e){
        e.preventDefault();
        $('#wrapper').load(link+' .content');
    });
});

通过使用此 jQuery，可以重建 page1.html、page2.html 的精确表示，但使用 ajax 请求。我的问题是，我当然希望网络浏览器中的 url 相应地更改。现在，当我希望在使用 ajax 获取第一个链接时显示“www.mypage.com/page1.html”时，它只会显示“www.mypage.com”。我怎样才能实现这一目标？

Answer 1

如果您以这种方式更改 URL，它将从服务器重新加载整个页面，而这不是您想要做的。

你想做的是SPA。为此，您只能更改 URL 的 anchor 部分，即添加一个哈希值，后跟您想要的任何内容，例如:

www.mypage.com#page1
www.mypage.com#page2

通常，除了更改 url 之外，如果 URL 发生变化，您还希望更改页面内容。这就是所谓的路由，大多数框架(如 Ember.js、Backbone、AngularJS、Durandal 等)都包含一个。由于您不需要框架，因此可以使用独立的框架，例如 router.js 。比路由器文档本身更好，请查找 some examples like this .