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

Question

我正在开发一个显示交易记录列表的网站(每页 10 条记录)。

页面具有分页和搜索功能，可以让用户查看具体的交易记录(如日期范围、类型……最多10个以上参数) )

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

但是，假设用户单击下一页(ajax 调用)来查看 page2 并尝试单击浏览器后退按钮。该网站会将他重定向到另一个网页，而不是返回到 page1。

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

有现有的解决方案可以解决这个问题吗？谢谢。

<小时/>

编辑:我今天中午尝试了history.js。

//newUrl: "?para1=value1&para2=value2&....

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

并且在ajax请求之后url发生了变化。我有一个问题是如何处理更改事件。我想绑定(bind)后退/下一步(用户点击)事件并获取“newUrl”，然后将其解析回参数映射并再次执行ajax请求。如果可能的话，我想在pushState时存储整个参数数组。

Answer 1

不幸的是，您无法捕获“后退/下一个”事件，因为它不存在，但您可以捕获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);
});

我通常做的是捕获用户的点击，如果在没有点击的情况下触发状态更改，我认为用户会执行下一步或返回。