正在使此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>

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<a href="link1.php"></a>
<a href="link2.php"></a>
<div id="wrapper-outer">
<div id="wrapper">
</div>
</div>
</body>
</html>

编辑：

抱歉，链接似乎从未插入。

文章：http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate工作示例：http://html5.gingerhost.com/

你确定这是对的吗：

$.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事件中获得新值，所以它无论如何都只会获得最后一个点击的页面？

此外，如果您不打算使用数据，而只是在每次迭代中执行相同的ajax调用，那么为什么要对json进行迭代呢？

编辑：

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

$(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链接没有路径，因此请确保它们在同一目录等中。

相关内容

最新更新

热门标签：