Javascript 从url到history.js中的ajax调用

我正在写一个小网站，它有几个非常相似的页面。大多数情况下，只有一个div的内容不同。导航、标题等保持不变

因此，我通过一个“基本”html文件实现了这一点，一些较小的html文件只有一个content div和类似的javascript代码（由按钮点击事件触发）：

这项工作非常顺利，但问题是，地址栏中的url不会随着这些请求而改变。因此，用户不可能链接到某些页面。我知道可以使用#-URL，但我希望有如下URL：

example.com/talks/foo/bar

而不是一些解决办法

在另一个线程中，有人给了我一个html5浏览器历史api的提示（特别是）

我试图用它实现的目标：

有人点击一个按钮->一个ajax请求被触发，content div的内容被更新->url被更新为类似

example.com/talks/foo/bar

如果有人直接在其浏览器中请求

example.com/talks/foo/bar

，则应执行与（1）中相同的ajax请求和内容更新

我试图通过以下方式实现第一个目标：

$.get("content/text1.html", function(data) {
    $("#content").html(data);
    History.pushState(null, null, "content/text1.html"); 
}); 

但我该如何实现第二点呢？使用重写规则，将所有内容重定向到基本html文件和其中的一些js逻辑，以解码url并触发ajax请求

我觉得我走错了一点路

---

• 这就是history.js的使用方式吗

• 我怎样才能达到第二个要点

---

要在html5浏览器中获得初始状态，不需要ajax调用。正如您所说，url本身会发生更改，而不是哈希，因此服务器应该使用已加载的正确内容回复url

您应该在

statechange

事件处理程序中执行所有ajax调用和DOM操作

因此，当用户单击一个链接时，您所做的就是调用

pushState

并在

statechange

事件处理程序中更改DOM。这是因为调用

pushState

时会触发

statechange

$.get("content/text1.html", function(data) {
    $("#content").html(data);
    History.pushState(null, null, "content/text1.html"); 
});