Jquery 在历史API中使用后退和前进按钮

我有以下测试应用程序：

您可以使用jqueryajax单击链接加载到其他页面中，有两种类型：globaltab和localTabs，它们将内容加载到不同的面板中。注意：每个页面实际上都是完整的页面，但是我们只使用jqueryfind方法获取我们想要的内容

为了增强这一点，我正在使用HTML5历史API（History.js用于跨浏览器）

标题和url变化良好，历史堆栈被成功推到，当我使用“后退”和“前进”按钮时，url和标题确实会恢复

现在，复杂的部分正在从以前的状态加载回内容，更复杂的是加载正确的类型，例如全局或本地ajax。为了实现这一点，我想我需要将数据和类型都传递给push状态，以便它可以再次用于popstate

有人能帮我指出正确的方向吗？我已经完成了所有第一部分的工作，只是将ajax类型传递到pushState，然后在popstate更改中重用它

为了改进这一点，我将其改写如下，以显示我传递类型和数据的计划：

注意：大写的History是因为我使用的是History.js

var App = {

    init: function() {

        $(document).ready(function() {

            $('.globalTabs li a').live('click', function (e) {
                e.preventDefault(); 
                App.globalLoad( $(this).attr('href') );
            }); 

            $('.localTabs li a').live('click', function (e) {
                e.preventDefault();
                App.localLoad( $(this).attr('href') );
            });

        });

        window.addEventListener('popstate', function(event) {

            // Load correct content and call correct ajax request...

        });

    },

    localLoad: function ( url ) {

        $.ajax({
            url: url,
            success: function (responseHtml) {
                $('.localContent').html($(responseHtml).find('#localHtml'));

                $data = { $(responseHtml).find('#localHtml'), 'local'};

                History.pushState($data, $(responseHtml).filter('title').text(), url);
            }
        });

    },

    globalLoad: function ( url ) {

        $.ajax({
            url: url,
            success: function (responseHtml) {
                $('.mainContent').html($(responseHtml).find('#globalHtml'));

                $data = { $(responseHtml).find('#globalHtml'), 'global'};

                History.pushState($data, $(responseHtml).filter('title').text(), url);
            }
        });

    }

};

App.init();

更新：为了澄清这个问题，我寻求帮助解决这两个问题。

1.）使用后退和前进按钮处理ajax请求，以便它们将正确的数据加载回内容区域

---

2.）通过使用pushState方法传递内容，将内容加载到正确的区域，以便它知道是全局div请求还是本地div请求。

数据对象错误，这就是出现该问题的原因。对象由键、值对定义：

object = {key:'value'};
$data = { text:$(responseHtml).find('#globalHtml'), type:'global', url:'the_url'};

不是

使用对象定义，您将使用History.getState（）返回数据

注:

• 当触发statechange事件get时，如果存在任何数据，它将触发ajax调用
• 为了模拟ajax调用而不改变标题，我认为这将涵盖它

编辑

• 数据对象实际上取自History.getState（）。数据不是History.getState（）
• 向存储对象添加了另一个参数以保留url
• 使用url和类型，可以调用与onClick事件中相同的函数

问题:

未捕获类型错误：将循环结构转换为JSON

一个对象在某处引用它自己；因此产生了“循环结构”的信息。这意味着您正试图对具有自身引用的对象进行字符串化，这通常发生在DOM元素中。你真的应该考虑改变< /P>

$data = { $(responseHtml).find('#localHtml'), 'local'};

致：

注意对象（html和类型）和html函数调用（.html（））的键，这样您就不会发送不必要的数据，只发送html。如果在将html数据作为DOM对象加载时需要使用它，请使用以下命令：

var DOM_Element_loaded = $('<div>').html(html_loaded);

var-DOM\u-Element\u-loaded=$（''）.html（html\u-loaded）；

现在，您可以使用加载的DOM_元素来搜索/操作加载的html中的数据，而无需将其附加到正文中。

注意：这实际上是一个注释，而不是一个答案，但是您可以通过答案回答获得更好的语法突出显示

这就是我遇到这个问题时所做的。如果我没记错的话，这就避免了双重请求问题

window.onpopstate = function(event) {
  if (event.state && event.state.initialHref) {
    // make an AJAX request
    // URL for AJAX request is event.state.initialHref
  }
}

---

当我使用

history.pushState（）

/

history.replaceState（）

时，我在对象中为第一个参数定义

initialHref

属性。我使用的是这个值的绝对URL，而不是相对URL。

那么我该如何启动它呢？你没提到波普州？当用户使用后退和前进按钮时，我需要做的是更改内容和标题（有效地复制ajax调用所做的事情），但是代替ajax，它将使用历史数据，因为显然没有必要重新加载它。我还得到一个错误：

uncaughttypeerror:Converting circular structure to JSON

有什么问题吗？编辑了我的回复，关于json错误，只需检查您是否传递了简单对象，没有函数最后一个问题。当您有效地执行两次ajax调用或内容更改时，就会发生statechange事件！在单击事件中单击一次，然后在状态更改时再次单击。可以把这个分开吗？显然，这会引起一些问题。谢谢。我正在考虑将attr添加到master div“page title='title'”中，并检查attr是否与当前标题匹配，如果匹配，则不加载它

$data = { html:$(responseHtml).find('#localHtml').html(), type:'local'};

var DOM_Element_loaded = $('<div>').html(html_loaded);

window.onpopstate = function(event) {
  if (event.state && event.state.initialHref) {
    // make an AJAX request
    // URL for AJAX request is event.state.initialHref
  }
}