web-dev-qa-db-ja.com

Chrome戻るボタンを押すとajax応答を表示します

JQueryのGetメソッドを使用して一部のコンテンツを取得すると、実際に履歴の1ページ前に戻るのではなく、Ajaxクエリによって返されたコンテンツが表示されるという問題に遭遇しました。

何か案は？

http://www.dameallans.co.uk/preview/allanian-society/news/56/Allanian-test

上記のページで、コメントのリストの下にあるページ付けを使用すると、ページを変更した後にクリックすると、コメントのリストの生成に使用されたHTMLコンテンツが表示されます。

いつもそうとは限らないことに気づきましたが、別のページを数回クリックして[戻る]ボタンをクリックすると、Webサイトではなくウィンドウ内にjsonテキストが表示されるだけです。

なんらかの理由で、これはChrome as IE as and Firefox work ok）にのみ影響しています。

ajaxgoogle-chromeback-button
50
Gavin

AJAXリクエストが完全なHTMLドキュメントとは異なるURLを使用していることを確認してください。Chromeが部分的なものであっても、最新のリクエストをキャッシュします.

https://code.google.com/p/chromium/issues/detail?id=108425

45
abraham

History API（またはhistory.jsなどのライブラリ）でjQueryを使用している場合に備えて、キャッシュをfalseに設定して$ .getJSONを$ .ajaxに変更する必要があります。

$.ajax({
    dataType: "json",
    url: url,
    cache: false,
    success: function (json) {...}
});
19
Dmitrii Sorin

実際には、これは仕様によるキャッシュシステムの予想される動作であり、chrome問題ではありません。キャッシュは、URLと要求メソッド（get、post、...）に基づいて要求を区別するだけで、リクエストヘッダーの。

しかし、キャッシュをチェックするときにいくつかのヘッダーを考慮するようにブラウザーに指示するVaryヘッダーがあります。たとえば、サーバーの応答にVary：X-Requested-Withを追加すると、ブラウザは、要求X-Requested-Withヘッダーが変更されると、この応答が変化することを認識します。または、サーバーの応答にVary：Content-Typeを追加することにより、ブラウザは、要求Content-Typeヘッダーが変更された場合にこの応答が変化することを認識します。

この行をPHPのルーターに追加できます。

header('Vary:X-Requested-With');

そして、node.jsでミドルウェアを使用します：

app.use(function(req, res) {
    res.header('Vary', 'X-Requested-With');
});
14
Ali

Ajax URLの最後にランダムな値を追加することもできます。これは以前のchromeキャッシュを無視し、新しいバージョンを要求します

url = '/?'+Math.random()
5
astroanu

Response headersに次のヘッダーを追加するだけです。

Vary: Accept
2
Hamed Kamrava

それはajaxページネーションであるため、各ajaxリクエストに異なるURLを指定できませんでした。ヘッダーにキャッシュがないことを宣言すると、何もしないので、ヘッダーがajaxリクエスト用である場合にのみ、ビューに小さなJavaScriptを含めました。

<script>
if (typeof jQuery == 'undefined') {
    window.location = "<?php echo $this->here; ?>";
}
</script>

これは汚いトリックですが、動作します。ajaxコンテンツが通常読み込まれている場合、コンテナにはJqueryが読み込まれているため、何も実行されません。しかし、周囲のコンテンツなしでajaxの想定コンテンツをロードすると、Jqueryが欠落しているため（少なくとも私の場合）、すべてのヘッダーとスクリプトを含む通常のGETページを要求する現在のページにリダイレクトします。

ページの上部に配置した場合、ページが読み込まれるまで待機しないため、ユーザーは気付かないでしょう。ブラウザがこの4行を取得するとすぐにリダイレクトされます...

ここで置き換えます。 ？>アプリの現在のURLによって、これはCakePhp 2.Xでした

1
Gestudio Cloud

laravelコントローラーのインデックスメソッドを使用したい場合、コントローラーはhtmlとjsonの両方の応答を返します。ブラウザーのキャッシュを渡すために、エンドポイントの最後にgetパラメーターを追加します。

axios.get(url, {params: {ajax: 1}})
0
crx4

@アブラハムの答えは正しいです。 Railsのソリューションを投稿したかっただけです。routes.rbに別のパスを追加するだけです。

たとえば、resource :peopleがあり、ajaxパーツからインデックスページを作成したいのですが、そのうちの1つは人のリストです。簡単な方法は、index.js.erbを作成し、url: people_pathを使用してajax経由でパーシャルをロードすることです。しかし、ここで問題が発生します。

したがって、Railsの場合は、次のような別のルートを追加するだけです。

get 'people_list', to: 'people#index', as: :people_list, format: :js

0
atlascoder