如何使用 ajax 调用实现后退按钮答案

【问题标题】：How to implement back button with ajax calls made如何使用 ajax 调用实现后退按钮
【发布时间】：2013-10-26 08:34:21
【问题描述】：

我有一个单页网络应用程序，它允许用户输入流派、日期范围和其他大量输入。

现在我读取所有这些输入并向服务器发出 ajax 发布请求。服务器在 java spring mvc 上。

一切正常。现在我想创建一个后退功能。

所以在进行了几次搜索之后，如果用户想要回到之前的第 4 次或第 5 次搜索，他应该能够做到这一点。

我看到了 history.back(-1) 但它不适合这里。因为 ajax 调用不会改变 url。我的网址总是 localhost:8080/MyImdb

ajax 调用如下所示：

xhr = $.ajax({
            type: 'POST',
            async: true,
            dataType: 'json',
            url: location.href + 'getResults',          
            data: ({date:dateRange, genre:genre, cast:cast }),

            success:function(json) {
                processData(json);
            },
            error: function(jqXHR, textStatus, errorThrown){
                var error = "jqXHR: " + jqXHR + "; ; ; ; status: " + textStatus + "; ; ; ; errorThrown: " + errorThrown;
                console.log(error);
            }
        }).done(function() {
            hideLoadingIndicator();
        });

我的一个想法是将所有帖子数据放入对象中。并将这些对象保存在堆栈中。现在创建一个后退按钮。当用户单击它时，从堆栈中弹出对象并使用弹出的对象发出 ajax 发布请求并并行更新前端的输入框

这是标准方式还是有一些库可以做到这一点。

我查看了 jquery 历史插件和 hashchange 事件，但我认为它们不适合我的上述情况，因为 url 总是相同的。

你们中有人遇到过这种情况吗？

【问题讨论】：

我刚刚保存了搜索 - 几乎就像你提到的堆栈解决方案

标签： javascript jquery ajax spring web-applications

【解决方案1】：

你必须实现一个监听 hashchange 事件的路由器。例如，如果您有一个使用 AJAX 将内容从 A 更改为 B 的链接，然后该后退按钮会将内容从 B 更改回 A，则流程如下：

当前网址为localhost:8080/MyImdb#index（例如）
用户点击href #example的链接
浏览器导航到localhost:8080/MyImdb#example
hashchange 事件被触发
路由器选择事件，对其进行分析并将内容从 A 更改为 B
用户点击返回按钮
浏览器导航到localhost:8080/MyImdb#index的后面
hashchange 事件被触发
路由器选择事件，对其进行分析并将内容从 B 更改为 A

因此，除了更改哈希值之外，不要点击链接做其他事情。路由器处理内容更改。 Dojo 似乎支持这种东西。我还没有尝试过，但演示似乎很有希望：http://dojotoolkit.org/documentation/tutorials/1.9/hash/。 jQuery 似乎也有为此制作的插件。可以在这里找到：https://github.com/Emberex/hashrouter

我希望这会有所帮助。

【讨论】：