使用ajax调用时如何实现next / back函数？

Question

我正在一个显示交易记录列表的网站（每页10条记录）。

该页面具有分页和搜索功能，允许用户查看特定的交易记录。（如日期范围，类型...最多最多10个参数）

当用户单击任何内容（更改页面/搜索条件）时，将使用ajax调用来获取和显示交易，而无需重新加载。

但是，例如，用户单击下一页（ajax调用）以查看page2并尝试单击浏览器的后退按钮。 该网站会将他重定向到另一个网页，而不是返回到第1页。

我知道有一个window.history.pushState可以更改url，而无需在chrome / Firefox中重新加载html5。 但我必须支持 IE7 + / FF / Chrome / Safari等较旧的浏览器 。

是否有解决此问题的现有解决方案？ 谢谢。

---

编辑 ：我已经中午尝试了history.js。

// newUrl：“？para1 = value1＆para2 = value2＆....

history.pushState({data:"searchTransaction"}, document.title, newUrl);

在ajax请求之后，URL也已更改。 我有一个问题是如何处理更改事件。 我想绑定back / next（user click）事件并获取“ newUrl”，然后将其解析回参数映射并再次执行ajax请求。 而且我想在可能的情况下存储整个参数数组。

Answer 1

不幸的是，您无法捕获“ back / next”事件，因为该事件不存在，但是您可以捕获statechange

// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
    var State = History.getState(); // Note: We are using History.getState() instead of event.state
    History.log(State.data, State.title, State.url);
});

我通常要做的是捕获用户的点击，并且如果在没有单击的情况下触发了状态更改，我会假设用户下一步还是返回。