1

このpushstateとpopstateをajaxアプリケーションに使用する方法を理解しようとしています。プラグインがいくつかあることは知っていますが、現時点では未加工の形で使用する方法を学ぼうとしています。また、生の形式ではIEでサポートされていないことも認識しています。それはさておき、私はそれを使用する方法を理解するためにいくつかの助けが必要です。

そのプッシュステート部分は非常に単純です。今私は持っています：

function loadForm(var1,var2){ 
    string = "xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

これにより、URLが適切に変更され、URLスタックに追加されます。次のような別の関数があります。

function loadForm2(var1,var2, var3){ 
    string = "xyz="+var1+"&abc="+var2+"&123="+var3;
        history.pushState("", "page 2", string);
}

2番目の関数も、呼び出されたときにURLを変更します。今、私はその部分を持っているので、ポップステートの使い方を理解しようとしています。今私はそれを次のように持っています

window.popState = ajax;

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: string,
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

したがって、2つのリンクを使用してページをイメージできる場合、1つはloadForm関数を呼び出し、もう1つはloadForm2関数を呼び出します。各リンクをクリックすると、フォームはajaxを介して正常に読み込まれ、URLが適切に変更されます。戻るボタンを押すと、URLは前のページのURLにロールバックしますが、ページのコンテンツは前のフォームではなく現在のフォームを再度ロードします。戻るボタンを押すと、前のフォームを読み込もうとしているかのようにajax呼び出し（firebug）を実行しますが、前のajax呼び出しを実行する代わりに、現在のajax呼び出しを実行します。したがって、私のURLは前のURLに戻りますが、ロードされるフォームまたは呼び出されるajax呼び出しは、最新のページロードと同じです（前のページロードではありません）。

何が間違っているのかわかりません。助けていただければ幸いです。

4

1 に答える 1

8

あなたは何か変なことをしている。

window.popState = ajax;

ajax()呼ばれることすら驚いています。

通常の方法は、イベントハンドラーを登録することです。

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;
}

history.pushstateおよびpopstateで戻るボタンを使用するときに変更をトリガーする方法を参照してください。

編集：

基本的に、状態が変更されたときにロードするフォームを知る必要があります。.originalEvent.stateこの情報が含まれ、ajax呼び出しに渡すことができます。また、それぞれのが含まれている必要がありますstring。

あなたのアプローチの問題はstring、常に最後に新しくロードされたページの1つであり続けることです。その文字列をで読み取る必要がありますevent.orginalEvent.state。console.log()そのオブジェクトでそれを見つけるために使用します。

編集2：

私のコードがどのように見えるべきかの例を私に与えることができる方法はありますか？あなたは私が成し遂げようとしていることを理解していると思います。

ブラウザの戻るボタン（または進むボタン）がクリックされるたびに、AJAXからページをロードする必要があります。

あなたは次のように言ってこれを行おうとしました：

window.popState = ajax;

システム機能を交換するため、これは危険です。

代わりに、状態が変化したときのイベントハンドラーを登録する必要があります。

jQuery(window).bind('popstate', ajax);

これで、戻るボタンが押されるたびに、ajax()関数が呼び出されます（すべきです）。

これまでのところ、これはそれに対するあなたのアプローチを改善するだけであり、あなたの問題を解決することはありません。

問題は、元のajax()関数がと呼ばれるグローバル変数を参照していることstringです。このグローバル変数には、以前の状態のメモリがありません。したがって、元のフォームが何度も読み込まれるたびに。

ただし、次のようにすることで、すでに状態を正しく保存stringしています。

history.pushState("", "page 1", string);

したがって、ajaxが呼び出されると、ブラウザーはそれにすべての情報を含むイベントオブジェクトを提供します。

したがって、今必要なのはajax()、次のように変更することだけです。

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: document.location.search.substr(1),
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

最後にstring、キーワードを使用してグローバル変数としての使用を停止しvar、文字列に「？」が含まれていることを確認する必要があります。

function loadForm(var1,var2){ 
    var string = "?xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

これにより、ほとんど機能しているが正しく機能していないものについての将来の混乱を減らすことができます。

于 2012-03-18T17:48:09.340 に答える