Question

我正在尝试在我的网站上找到 here 的代码。正如预期的那样，该站点被构建为普通站点，发送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/

Answer 1

你确定这是对的：

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

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

1 个答案: