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请求。我的问题是我当然希望网页浏览器中的网址相应更改。现在它只是说“www.mypage.com”，当我希望它显示“www.mypage.com/page1.html”时，第一个链接是用ajax获取的。我怎样才能做到这一点？

Answer 1

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

你想做什么是SPA。为此，您只能更改URL的锚点部分，即添加哈希后跟任意内容，例如：

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

通常，除了更改网址外，您还希望在网址更改时更改网页内容。这就像路由一样，大多数框架如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，就好像页面是静态的一样，这在我看来是一个巨大的优势。

使用ajax获取子页面，如何更改URL？

2 个答案: