1

ここで見つけたコードを自分のサイトで動作させようとしています。予想どおり、サイトは通常のサイトとして構築され、ページ変更の 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/

4

1 に答える 1

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リンクにはパスがないため、同じディレクトリなどにあることを確認してください。

于 2012-08-06T03:14:14.523 に答える