8

次のテスト アプリケーションがあります: http://dev.driz.co.uk/ajax/

リンクをクリックして、jQuery AJAX を使用して他のページに読み込むことができます。コンテンツを別のパネルに読み込むには、globalTabs と localTabs の 2 つのタイプがあります。注: 各ページは実際には完全なページですが、jQuery の find メソッドを使用して必要なコンテンツのみを取得します。

これを強化するために、HTML5 History API (クロスブラウザー用の History.js) を使用しています。

タイトルと URL が正常に変更され、履歴スタックが正常にプッシュされ、戻るボタンと進むボタンを使用すると、URL とタイトルが元に戻ります。

複雑な部分は、以前の状態からコンテンツをロードし直し、グローバルまたはローカルの ajax などの正しいタイプをロードすることです。これを達成するには、データと型の両方をプッシュ状態に渡して、ポップ状態で再利用できるようにする必要があると考えています...

誰かが私を正しい方向に向けるのを手伝ってくれますか? 最初の部分はすべて機能しています。この 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();

更新: この質問を明確にするために、それらは私が助けを求めている 2 つの問題です。

1.) ajax リクエストで動作する戻るボタンと進むボタンを取得して、コンテンツ領域に正しいデータをロードします。

2.)グローバル div リクエストかローカル div リクエストかを認識できるように、pushState メソッドを使用してコンテンツを渡すことにより、コンテンツを正しい領域にロードします。

4

2 に答える 2

12

データオブジェクトが間違っているため、この問題が発生します。オブジェクトは、キーと値のペアによって定義されます。

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

いいえ

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

オブジェクト定義を使用すると、History.getState（）を使用してデータを取得できます。

History.Adapter.bind(window,'statechange',function(){
    var data = History.getState().data;
    if(data){
        var html = data.text;
        var type = data.type;
        var type = data.url;
        if(html && type){
            if(type == 'global'){
                // just change html
                $('.mainContent').html(html);
                // call the App object's function
                if(url) App.localLoad(url);
            }else{
                $('.localContent').html(html);
            }
        }
    }
})

ノート：

  • 状態変更イベントが発生すると、データが存在する場合、ajax呼び出しが発生します
  • タイトルも変更せずにajax呼び出しをシミュレートするには、それでカバーできると思います

編集

  • データオブジェクトは、実際にはHistory.getState（）ではなくHistory.getState（）。dataから取得されます。
  • 保存されたオブジェクトに別のパラメータを追加して、URLを保持します
  • URLとタイプを使用して、onClickイベントと同じ関数を呼び出すことができます

問題：

Uncaught TypeError：循環構造をJSONに変換しています

オブジェクトはどこかでそれ自体を参照しています。したがって、メッセージ「円形構造」。つまり、それ自体への参照を持つオブジェクトを文字列化しようとしているということです。これは通常、DOM要素で発生します。あなたは本当に変更を検討する必要があります

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

に：

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

オブジェクト（htmlとタイプ）とhtml関数呼び出し（.html（））のキーに注意してください。これにより、不要なデータを送信せず、htmlだけを送信できます。DOMオブジェクトとしてロードするときにhtmlデータを使用する必要がある場合は、次を使用してください。

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

これで、DOM_Element_loadedを使用して、本体にアタッチしなくても、ロードされたhtmlのデータを検索/操作できます。

于 2012-08-25T07:45:26.990 に答える
0

注：これは実際には回答というよりはコメントですが、回答応答で構文の強調表示が改善されます。

これは、この問題に遭遇したときに私がしたことです。私の記憶が正しければ、これにより二重要求の問題が回避されました。

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

history.pushState()/を使用する場合、第 1 引数のオブジェクトでプロパティをhistory.replaceState()定義しています。initialHrefこの値には、相対 URL ではなく絶対 URL を使用しています。

于 2012-08-31T19:24:16.133 に答える