使用 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 的锚部分，即添加一个散列，然后添加任何您想要的内容，例如：

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

通常，除了更改 url 之外，如果 URL 发生更改，您还想更改页面内容。这被称为路由，大多数框架如 Ember.js、Backbone、AngularJS、Durandal 等都包含一个。由于您不需要框架，您可以使用像router.js 这样的独立框架。比路由器文档本身更好，寻找some examples like this。

Answer 2

我发现了 javascript 方法 pushState，你可以这样做：

$('a').click(function(){
    var link = $(this).attr('href');
    window.history.pushState(null,null,link);
});

并且网络浏览器链接已正确更新。这似乎适用于我认为除了 IE9 之外的所有现代浏览器。使用这种方法，我可以得到与静态页面完全相同的 url，这在我看来是一个巨大的优势。