Jquery 使此pushState/load内容代码正常工作

我正在尝试获取我在网站上找到的代码。正如所料，该站点是作为一个普通站点构建的，发送HTTP页面更改请求，现在我正尝试将其升级为完整的ajax

下面的代码执行pushState，后退/前进按钮工作，但我无法更改页面内容。有人知道我哪里出错了吗

<script>
$(function(){
$('a').on('click', function(e) {
    $("#loading").show();
    href = $(this).attr("href");

    loadContent(href);

    // HISTORY.PUSHSTATE
    history.pushState('', 'New URL: '+href, href);
    e.preventDefault();
});

// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
    $("#loading").show();
    console.log("pathname: "+location.pathname);
    loadContent(location.pathname);
};
});

function loadContent(url){
// USES JQUERY TO LOAD THE CONTENT
$.getJSON("post.php", {cid: url, format: 'json'}, function(json) {
    // THIS LOOP PUTS ALL THE CONTENT INTO THE RIGHT PLACES
    $.each(json, function(key, value){
        $('#wrapper').load(href);
    });
});     
}
</script>

$（函数（）{
$（'a'）。在（'click'，函数（e）上{
$（“#加载”）.show（）；
href=$（this.attr（“href”）；
加载内容（href）；
//历史，国家
history.pushState（“”，“新URL:”+href，href）；
e、 预防默认值（）；
});
//此事件确保后退/前进按钮也能工作
window.onpopstate=函数（事件）{
$（“#加载”）.show（）；
log（“路径名：+location.pathname”）；
loadContent（location.pathname）；
};
});
函数加载内容（url）{
//使用JQUERY加载内容
$.getJSON（“post.php”，{cid:url，格式：'json'}，函数（json）{
//此循环将所有内容放入正确的位置
$.each（json、函数（键、值）{
$（'#包装器'）.load（href）；
});
});     
}

HTML:

标题

编辑：

抱歉，链接似乎从未插入

第条：

---

工作示例：

您确定这是正确的：

$.getJSON("post.php", {cid: url, format: 'json'}, function(json) {
    $.each(json, function(key, value){
        $('#wrapper').load(href);
    });
});   

首先，您执行一个ajax调用以获取一些json数据，然后迭代该json数据（假设它返回），在每次迭代中，您所做的只是对前面设置的同一个href进行另一个ajax调用，这是一个全局变量，您已经在调用loadContent时发送了该变量，可以作为

url

访问，不需要全局设置，而且

href

似乎没有从您的popstate事件中获取新值，因此它将只获取最后一次单击的页面

另外，如果不打算使用数据，为什么要迭代json，并且每次迭代都执行相同的ajax调用呢

编辑：

这将是一个很大的猜测，但试着简化一点：

$(function() {
    $('a').on('click', function(e) {
        e.preventDefault();
        var href = $(this).attr("href");
        loadContent(href);
        history.pushState({}, '', href);
    });
    $(window).on('popstate', function() {
        loadContent(location.pathname);
    });
});

function loadContent(url) {
    $('#wrapper').load(url);
}
​

---

您的HTML链接没有路径，因此请确保它们位于同一目录等中。

您确定这是正确的：

$.getJSON("post.php", {cid: url, format: 'json'}, function(json) {
    $.each(json, function(key, value){
        $('#wrapper').load(href);
    });
});   

首先，您执行一个ajax调用以获取一些json数据，然后迭代该json数据（假设它返回），在每次迭代中，您所做的只是对前面设置的同一个href进行另一个ajax调用，这是一个全局变量，您已经在调用loadContent时发送了该变量，可以作为

url

访问，不需要全局设置，而且

href

似乎没有从您的popstate事件中获取新值，因此它将只获取最后一次单击的页面

另外，如果不打算使用数据，为什么要迭代json，并且每次迭代都执行相同的ajax调用呢

编辑：

这将是一个很大的猜测，但试着简化一点：

$(function() {
    $('a').on('click', function(e) {
        e.preventDefault();
        var href = $(this).attr("href");
        loadContent(href);
        history.pushState({}, '', href);
    });
    $(window).on('popstate', function() {
        loadContent(location.pathname);
    });
});

function loadContent(url) {
    $('#wrapper').load(url);
}
​

---

您的HTML链接没有路径，因此请确保它们位于同一目录中等。

如果您可以提供一个工作示例，说明如何实现这一点，因为它使用的是ajax请求，那么回答这个问题就会容易得多？我无法在那里加载跨域内容。此外，我已经建立了源站点，这还不够吗？JSFIDLE有一个API来模拟AJAX请求：源站点链接似乎不起作用。只向我显示粗体文本，没有链接。是的，我刚刚注意到。抱歉，请检查代码下方的编辑。如果您可以提供一个工作示例，说明由于它使用了ajax请求，如何才能做到这一点，那么回答问题就会容易得多？我无法在那里加载跨域内容。此外，我已经建立了源站点，这还不够吗？JSFIDLE有一个API来模拟AJAX请求：源站点链接似乎不起作用。只向我显示粗体文本，没有链接。是的，我刚刚注意到。抱歉，请检查代码下方的编辑。我不知道，我只是从网站lol复制了代码。从未使用过这种类型的ajax加载，因此，尽管阅读了它，但不知道应该/不应该更改什么。如果您可以将其修改为to，请执行。@CoreyRS-将其简化一点，尝试一下，并保持控制台打开（F12）以检查错误。mwuahahaha，您是一个传奇。我不知道，我只是从网站lol复制了代码。从未使用过这种类型的ajax加载，因此，尽管阅读了它，但不知道应该/不应该更改什么。如果您可以将其修改为，请执行。@CoreyRS-将其简化一点，尝试一下，并保持控制台打开（F12）以检查错误。mwuahahaha，您是一个传奇人物。