[解決済み] AJAXアプリのアドレスバーのURLを現状に合わせて変更する
2022-04-24 10:09:45
質問
AJAXアプリを書いているのですが、ユーザーがアプリ内を移動する際、ページの再読み込みがないにもかかわらず、アドレスバーのURLが更新されるようにしたいのです。基本的に、私は彼らが任意の時点でブックマークし、それによって現在の状態に戻ることができるようにしたいと思います。
AJAXアプリでRESTfulnessを維持するために、人々はどのように対処しているのでしょうか?
どのように解決する?
を操作する方法です。
location.hash
は、AJAXの更新によって状態が変化したときに、個別のURLを持つようにします。 例えば、あなたのページのURLが
クライアント側の関数がこのコードを実行した場合。
// AJAX code to display the "foo" state goes here.
location.hash = 'foo';
すると、ブラウザに表示されるURLは、次のように更新されます。
これにより、ユーザーはページの "foo" 状態をブックマークし、ブラウザーの履歴を使用して状態間を移動することができます。
この仕組みがあると、フラグメント識別子(#以降の部分)はサーバーに送られないので、クライアント側でJavaScriptを使ってURLのハッシュ部分を解析し、適切な初期状態を生成して表示する必要があります。
Ben Almanのhashchangeプラグイン は、jQueryを使用している場合、後者を簡単に行うことができます。
関連
-
[解決済み] エラー「SCRIPT7002」の解決方法について。XMLHttpRequest: IEで「ネットワークエラー 0x80070005, アクセスは拒否されました。
-
[解決済み] RichFacesのa4j:ajaxタグのevent属性の取りうる値のリスト
-
onclickイベントの値を渡して、ajaxリクエストの実行に移る
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] jQueryで現在のURLを取得する?
-
[解決済み] Ruby on Railsで現在の絶対URLを取得するにはどうすればよいですか?
-
[解決済み] CORSです。資格情報フラグが true の場合、Access-Control-Allow-Origin でワイルドカードを使用できない。
-
[解決済み] FirefoxでjQuery $.ajax(), $.post がREQUEST_METHODとして "OPTIONS "を送信する問題
-
[解決済み】一部のAJAXコールで "net::ERR_BLOCKED_BY_CLIENT "エラーが発生する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AJAX使用時にGoogle Maps APIが "Uncaught ReferenceError: google is not defined "を投げる。
-
[解決済み] check_ajax_referer() は実際どのように動作するのでしょうか?
-
onclickイベントの値を渡して、ajaxリクエストの実行に移る
-
[解決済み] JSONまたは部分的なhtmlを返すASP.NET MVCコントローラのアクション
-
[解決済み】一部のAJAXコールで "net::ERR_BLOCKED_BY_CLIENT "エラーが発生する。
-
[解決済み】jQuery.ajaxのcontinueレスポンスの処理。"success:" vs ".done"?
-
[解決済み] jQuery AJAXリクエストをキャンセル/中止する方法は?
-
[解決済み】「for (;;); { json data }」のようなAjax呼び出し応答は何を意味するのでしょうか?[重複している]。
-
[解決済み] POST JSONが415 Unsupported media typeで失敗する、Spring 3 mvc
-
[解決済み] Google インスタントはどのように機能するのですか?