jQuery .load応答がキャッシュされないようにする


244

次のコードでURLに対してGETリクエストを作成しています。

$('#searchButton').click(function() {
    $('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val());            
});

ただし、返された結果が常に反映されるとは限りません。たとえば、スタックトレースを吐く応答を変更しましたが、検索ボタンをクリックしてもスタックトレースが表示されませんでした。ajax応答を制御する基本的なPHPコードを調べたところ、正しいコードがあり、ページに直接アクセスすると正しい結果が表示されましたが、.loadから返された出力は古いものでした。

ブラウザを閉じて再度開くと、一度動作してから古い情報を返し始めます。これをjQueryで制御できますか、それともキャッシュを制御するためにPHPスクリプト出力ヘッダーが必要ですか?

回答:


419

$.ajax()リクエストごとにキャッシュを制御する場合のように、より複雑な関数を使用する必要があります。または、すべてに対してオフにしたい場合は、これをスクリプトの先頭に追加します。

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

2
ありがとうございました!これはjQueryドキュメントにもありますか?ああ...見つけた ちょっとうんざり。これは一日中お尻を蹴っていました...ありがとうございます!
bytebender '19

35
このすべてのキャッシュ:falseは、リクエストを行うときにURLの末尾に数字(タイムスタンプを信じます)を追加します。有効期限のようなキャッシュ設定を処理するために、他の場所では、様々なHTTPレスポンスヘッダを設定することで、サーバーやWebアプリからある、プラグマ、等...
ブライアンRehbein

1
この情報は私を大いに助けてくれました-それは本当にしつこいバグを見つけるのに役立ちました
Luke101

大好きです!これで、過度に冗長な.ajax呼び出しを使用する必要がなくなり、ショートカットを使用できます。
ガットスター、2011年

1
ブリリアント-私はこの関数を見つけましたが、.loadを使用してテキストドキュメントをdivにロードするような単純なもので機能することを知りませんでした
Dan

107

これは、リクエストごとにキャッシュを制御する方法の例です

$.ajax({
    url: "/YourController",
    cache: false,
    dataType: "html",
    success: function(data) {
        $("#content").html(data);
    }
});

7
すべてのキャッシュをオフにするよりも、この方法の方がずっと好きです。
ポールトンブリン2010年

また、すべてのキャッシュをオフにしないので、これも気に入っています。また、フィルタリングについては、この投稿[リンク] stackoverflow.com/questions/4245231/…ご覧ください。
Dan Doyon 2011年

@Marshallここのコードでは、POSTやGetタイプについて言及していません……だから、jqueryのデフォルトは何ですか?
Thomas

デフォルトのメソッドはGET
リッチT.

35

1つの方法は、URLの末尾に一意の番号を追加することです。

$('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val()+'&uid='+uniqueId());

呼び出されるたびに別のものを返すようにuniqueId()を記述する場所。


1
さらに簡単に、ただ使用するだけです(+new Date)(またはnew Date().getTime()、ステッカーを使用している場合)。JavaScriptでタイムスタンプを取得するにはどうすればよいですか?を
サードパーティ、2014年

新しい質問をして、ここにリンクしてください。正しく実行した場合は、完全に新しいURLを生成しているため、ブラウザーでキャッシュできない可能性があります。
ルーフランコ

これを使用して、無関係な問題を解決しました。御馳走を働かせます。
アレックス

9

サーバーからデータを取得する必要がある場合にのみ下の行を配置する別のアプローチは、ajaxのURLとともに下の行を追加します。

'?_ =' + Math.round(Math.random()* 10000)


6
/**
 * Use this function as jQuery "load" to disable request caching in IE
 * Example: $('selector').loadWithoutCache('url', function(){ //success function callback... });
 **/
$.fn.loadWithoutCache = function (){
 var elem = $(this);
 var func = arguments[1];
 $.ajax({
     url: arguments[0],
     cache: false,
     dataType: "html",
     success: function(data, textStatus, XMLHttpRequest) {
   elem.html(data);
   if(func != undefined){
    func(data, textStatus, XMLHttpRequest);
   }
     }
 });
 return elem;
}

これは私にとってはほとんどトリックでした。コールバック関数の不正な「this」値を除いて。:私は、この修正するために、以下にFUNC()の呼び出しを変更 func.call(elem, data, textStatus, XMLHttpRequest);
GeekyMonkey

5

サーシャはいい考えです、私はミックスを使います。

関数を作成します

LoadWithoutCache: function (url, source) {
    $.ajax({
        url: url,
        cache: false,
        dataType: "html",
        success: function (data) {
            $("#" + source).html(data);
            return false;
        }
    });
}

そして、例えばinitで私のページの異なる部分を呼び出します:

Init:関数(actionUrl1、actionUrl2、actionUrl3){

var ExampleJS = {

Init: function (actionUrl1, actionUrl2, actionUrl3)           ExampleJS.LoadWithoutCache(actionUrl1, "div1");

ExampleJS.LoadWithoutCache(actionUrl2、 "div2"); ExampleJS.LoadWithoutCache(actionUrl3、 "div3"); }}、


4

これはIEで特に厄介です。基本的には、サーバーからの応答で「キャッシュなし」のHTTPヘッダーを送信する必要があります。


3

PHPの場合、必要な情報を提供するスクリプトに次の行を追加します。

header("cache-control: no-cache");

または、クエリ文字列に一意の変数を追加します。

"/portal/?f=searchBilling&x=" + (new Date()).getTime()

$ .ajax関数のcache:falseオプションは、2番目の提案のように、一意の変数をクエリ文字列に自動的に追加します。
ブライアンレーバイン2010年

2

タイムスタンプを使用して一意のURLを作成しないでください。アクセスするすべてのページがjquery mobileによってDOMにキャッシュされ、携帯電話のメモリが不足するという問題が発生します。

$jqm(document).bind('pagebeforeload', function(event, data) {
    var url = data.url;
    var savePageInDOM = true;

    if (url.toLowerCase().indexOf("vacancies") >= 0) {
        savePageInDOM = false;
    }

    $jqm.mobile.cache =  savePageInDOM;
})

このコードは、ページがロードされる前にアクティブになります。url.indexOf()を使用して、URLがキャッシュするものかどうかを判断し、それに応じてキャッシュパラメータを設定できます。

window.location = ""は使用しないでください。それ以外の場合はURLを変更するためにアドレスに移動し、pagebeforeloadは起動しません。この問題を回避するには、単純にwindow.location.hash = ""を使用します。


1
$ jqmとは何ですか?$ jqm = $?$ .mobile.cacheは未定義
Luciuz、'19

2

Jqueryの.load()メソッドを使い続ける場合は、JavaScriptタイムスタンプなど、URLに固有の何かを追加します。"+ new Date()。getTime()"。pid変数を変更しないように、「&time =」を追加する必要があることに注意してください。

$('#searchButton').click(function() {
$('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val()+'&time='+new Date().getTime());            
});

1

jqueryロード関数を、キャッシュがfalseに設定されているバージョンに置き換えることができます。

(function($) {
  var _load = jQuery.fn.load;
  $.fn.load = function(url, params, callback) {
  if ( typeof url !== "string" && _load ) {
        return _load.apply( this, arguments );
  }
    var selector, type, response,
      self = this,
      off = url.indexOf(" ");

    if (off > -1) {
      selector = stripAndCollapse(url.slice(off));
      url = url.slice(0, off);
    }

    // If it's a function
    if (jQuery.isFunction(params)) {

      // We assume that it's the callback
      callback = params;
      params = undefined;

      // Otherwise, build a param string
    } else if (params && typeof params === "object") {
      type = "POST";
    }

    // If we have elements to modify, make the request
    if (self.length > 0) {
      jQuery.ajax({
        url: url,

        // If "type" variable is undefined, then "GET" method will be used.
        // Make value of this field explicit since
        // user can override it through ajaxSetup method
        type: type || "GET",
        dataType: "html",
        cache: false,
        data: params
      }).done(function(responseText) {

        // Save response for use in complete callback
        response = arguments;

        self.html(selector ?

          // If a selector was specified, locate the right elements in a dummy div
          // Exclude scripts to avoid IE 'Permission Denied' errors
          jQuery("<div>").append(jQuery.parseHTML(responseText)).find(selector) :

          // Otherwise use the full result
          responseText);

        // If the request succeeds, this function gets "data", "status", "jqXHR"
        // but they are ignored because response was set above.
        // If it fails, this function gets "jqXHR", "status", "error"
      }).always(callback && function(jqXHR, status) {
        self.each(function() {
          callback.apply(this, response || [jqXHR.responseText, status, jqXHR]);
        });
      });
    }

    return this;
  }
})(jQuery);

これを、jqueryのロード後に実行されるグローバルな場所に配置してください。既存のロードコードはキャッシュされなくなります。


0

これを試して:

$("#Search_Result").load("AJAX-Search.aspx?q=" + $("#q").val() + "&rnd=" + String((new Date()).getTime()).replace(/\D/gi, ''));

私がそれを使用したときそれはうまく働きます。


0

一部のサーバー(Apache2など)が特に「キャッシュ」を許可または拒否するように構成されていない場合、HTTPヘッダーを「no-cache」に設定していても、サーバーはデフォルトで「キャッシュ」応答を送信する可能性があることに気付きました。したがって、サーバーが応答を送信する前に、サーバーが何も「キャッシュ」していないことを確認してください。

Apache2の場合は、

1)「disk_cache.conf」ファイルを編集します-キャッシュを無効にするには、「CacheDisable / local_files」ディレクティブを追加します

2)mod_cacheモジュールをロードします(Ubuntuでは「sudo a2enmod cache」と「sudo a2enmod disk_cache」)

3)Apache2を再起動します(Ubuntu "sudo service apache2 restart");

これにより、サーバー側でキャッシュを無効にするトリックが実行されます。乾杯!:)


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.