ブラウザが Ajax リクエストを記憶し、前後に移動できるという問題を解決する

別の Web ページを閲覧するとき、ブラウザの進むキーと戻るキーを使用して、前後にアクセスしたページに移動できます。この記事では、ブラウザに ajax リクエストを記憶させ、前後に移動できるようにする方法を主に紹介します。必要な友達はそれを参照してください

別の Web ページを閲覧するとき、ブラウザの進むキーと戻るキーを使用できます。前後にアクセスしたページを前後に移動します。これらすべてに共通しているのは、ブラウザのアドレス バーのアドレスが変更されていることです。ブラウザ自体は、ユーザーが訪問したページの履歴を記録するスタックを維持します。このスタックには、ユーザーがさまざまなページにアクセスした順序が記録されます。

しかし、開発では、Web ページのユーザーエクスペリエンスを向上させるために、Ajax テクノロジーをよく使用します。ただし、Ajax 自体はブラウザのアドレス バーの URL を変更しません。現時点では、ブラウザは Ajax リクエストを記録しません。この場合、ページによってトリガーされた 5 つの ajax リクエストの後でユーザーが戻るボタンをクリックすると、ブラウザーは前の ajax リクエストを再度リクエストせず、前のページに戻ります。

この問題を解決する最初の方法は、場所のハッシュ値を使用することです。 URL のハッシュ値が変更された場合、ページはジャンプしませんが、ブラウザーはハッシュ化された URL を履歴レコードに記録します。この機能を使用すると、履歴機能を使用して ajax リクエストを人工的にシミュレートできます。以下はこの方法のデモです。

ul{
 margin:0;
 padding:0;
}
li{
 list-style: none;
 display: block;
 float: left;
 border: 1px solid #000;
 padding: 10px;
 margin-right: 20px;
 cursor: pointer;
}
li.active{
 background-color: #000000;
 color: #fff;
}
<ul>
 <li data-id="1">1</li>
 <li data-id="2">2</li>
</ul>

最初に 2 つのボタンを作成します。ボタンがクリックされると、リクエストがサーバーに送信され、パラメーターを通じてデータ ID がサーバーに渡され、サーバーはデータ ID に対応する結果を返します。 。
同時に、ボタンの状態を変更し、場所のハッシュ値を data-id 値に変更します。最後に、場所のハッシュ値の変化を監視し、上記の手順を繰り返します。

function sendAjax(hash){
 console.log("recived data:" + hash);
}
function btnStatus(hash){
 $("li").removeClass('active');
 $("li[data-id="+hash+"]").addClass('active');
}
function onHashChange(){
 var curHash = window.location.hash.replace("#","");
 if(curHash){
  btnStatus(curHash);
  sendAjax(curHash);
 }
}
window.onhashchange = onHashChange;
$("li").click(function(){
 var id = $(this).attr('data-id');
 window.location.hash = id;
});

「1-2-1」の順にボタンをクリックすると、コンソール出力は以下のようになります

recived data:1
recived data:2
recived data:2

このとき、戻るボタンを3回押します行、コンソール出力は次のとおりです

recived data:1
recived data:2
recived data:1

これは、Ajax リクエストを記録するブラウザの機能をシミュレートしていることがわかります。

上記は私があなたのためにまとめたものです。

関連記事:

PHPログイン(ajax送信データとバックグラウンド検証)

AJAXは非リフレッシュユーザー名検出機能を実装

jQueryでWebサービスを呼び出すajaxを介して配列パラメータを渡す問題(写真テキストチュートリアル)

以上がブラウザが Ajax リクエストを記憶し、前後に移動できるという問題を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。