JQuery .load yanıtının önbelleğe alınmasını durdurma


244

Bir URL GET isteği yapma aşağıdaki kodu var:

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

Ancak döndürülen sonuç her zaman yansıtılmaz. Örneğin, yanıtta yığın izini tüküren bir değişiklik yaptım, ancak arama düğmesini tıklattığımda yığın izlemesi görünmedi. Ajax yanıtı kontrol eden temel PHP koduna baktım ve doğru kodu vardı ve sayfayı ziyaret doğrudan doğru sonucu gösterdi ama .load tarafından döndürülen çıktı eski.

Tarayıcıyı kapatıp yeniden açarsam, bir kez çalışır ve daha sonra eski bilgileri döndürmeye başlar. Bunu jQuery ile kontrol edebilir miyim veya önbelleğe almayı kontrol etmek için PHP komut dosyası çıkış başlıklarına sahip olmam gerekir mi?

Yanıtlar:


419

$.ajax()İsteğe bağlı olarak önbelleğe almayı kontrol etmek istiyorsanız, gibi daha karmaşık bir işlev kullanmanız gerekir . Veya her şey için kapatmak istiyorsanız, bunu komut dosyanızın en üstüne koyun:

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

2
teşekkür ederim! Bu, jQuery belgelerinde de bulunuyor mu? Ahh ... buldu. Bir çeşit çürük. Bu gün boyunca popo tarafından tekme olmuştu ... Tekrar teşekkürler!
bytebender

35
Tüm bu önbellek: yanlış yapar bir istek (bir zaman damgası inanıyorum) bir url sonuna istek yaparken ekler. Önbellek ayarlarını işlemek için diğer yer, Expires, Pragma, vb.Gibi çeşitli HTTP yanıt üstbilgileri ayarlayarak sunucu veya web uygulamasından ...
Bryan Rehbein

1
Bu bilgi parçası beni çok etkiledi - bu gerçekten nagging bir hata
bulmama

Sevdim! Şimdi aşırı ayrıntılı .ajax çağrıları kullanmak zorunda değilim ve kısayolları kullanabilirsiniz!
Gattster

1
Brilliant - Bu işlevi buldum ama .load kullanarak bir div'a bir metin belgesi yüklemek kadar basit bir şey üzerinde çalışacağını bilmiyordum
Dan

107

Aşağıda, isteğe bağlı olarak önbelleğe almayı denetleme örneği verilmiştir.

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

7
Bu şekilde tüm önbelleği kapatmaktan çok daha iyi seviyorum.
Paul Tomblin

Ben de tüm önbelleği kapatmamak için bunu seviyorum. Ayrıca, filtreleme için bu gönderiye de [link] stackoverflow.com/questions/4245231/… .
Dan Doyon

@Marshall burada kod POST veya Get türü ...... bahsetmedi verdi bu yüzden jquery için varsayılan nedir?
Thomas

varsayılan yöntem GET
Rich T.

35

Bunun bir yolu, URL'nin sonuna benzersiz bir sayı eklemektir:

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

Her çağrıldığında farklı bir şey döndürmek için uniqueId () yazdığınız yer.


1
Daha da kolay, sadece kullanın (+new Date)(veya new Date().getTime()bir yapışkan iseniz). Bkz JavaScript bir zaman damgası nasıl alabilirim?
üçüncü sezon

Yeni bir soru sorun ve buraya bağlayın. Doğru yaptıysanız, tamamen yeni URL'ler oluşturursunuz, bu nedenle tarayıcı tarafından önbelleğe alınamazlar.
Lou Franco

ilgisiz bir sorunu çözmek için bunu kullandı. bir tedavi çalışır.
Alex

9

Aşağıdaki satırı yalnızca sunucudan veri almanız gerektiğinde koymak için başka bir yaklaşım, ajax url'nizle birlikte aşağıdaki satırı ekleyin.

'? _ =' + 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;
}

Bu neredeyse benim için hile yaptı. Geri arama fonksiyonu yanlış "bu" değere sahip. Bunu düzeltmek için func () çağrısını aşağıdaki şekilde değiştirdim: func.call(elem, data, textStatus, XMLHttpRequest);
GeekyMonkey

5

Sasha iyi bir fikir, bir karışım kullanıyorum.

Bir işlev oluşturuyorum

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

Ve sayfamın farklı bölümlerini örneğin init'te çağır:

Init: function (actionUrl1, actionUrl2, actionUrl3) {

var Örnek JS = {

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

ÖrnekJS.LoadWithoutCache (actionUrl2, "div2"); ÖrnekJS.LoadWithoutCache (actionUrl3, "div3"); }},


4

Bu, IE'de özellikle rahatsız edicidir. Temel olarak 'önbelleksiz' HTTP üstbilgilerini sunucudan verdiğiniz yanıtla geri göndermeniz gerekir.


3

PHP için istediğiniz satırı sunan betiğinize şu satırı ekleyin:

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

veya sorgu dizesine benzersiz bir değişken ekleyin:

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

$ .Ajax işlevindeki cache: false seçeneği, benzersiz değişkeni sorgu dizesine ikinci öneriniz gibi otomatik olarak ekler.
Bryan Rehbein

2

Benzersiz bir URL oluşturmak için zaman damgasını KULLANMAYIN çünkü ziyaret ettiğiniz her sayfa DOM'da jquery mobile tarafından önbelleğe alınır ve kısa süre içinde cep telefonlarında bellek yetersizliği ile karşılaşırsınız.

$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;
})

Bu kod sayfa yüklenmeden önce etkinleşir, URL'nin önbelleğe almak istediğiniz URL olup olmadığını belirlemek ve urache parametresini buna göre ayarlamak için url.indexOf () kullanabilirsiniz.

Window.location = "" kullanmayın; URL'yi değiştirmek için aksi takdirde adrese gidersiniz ve sayfa önyüklemesi tetiklenmez. Bu sorunu aşmak için window.location.hash = "";


1
$ jqm nedir? $ jqm = $? $ .mobile.cache undefined
Luciuz

2

Jquery'nin .load () yöntemine bağlı kalmak istiyorsanız, URL'ye benzersiz bir JavaScript zaman damgası gibi bir şey ekleyin. "+ yeni Tarih (). getTime ()". Uyarı "& time =" eklemek zorundayım, bu yüzden pid değişkeninizi değiştirmez.

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

1

Jquery load işlevini, önbellek false olarak ayarlanmış bir sürümle değiştirebilirsiniz.

(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);

Bu jquery yükleri sonra çalışacağı küresel bir yere yerleştirin ve hepiniz ayarlanmalıdır. Mevcut yükleme kodunuz artık önbelleğe alınmayacak.


0

Bunu dene:

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

Ben kullandığımda iyi çalışıyor.


0

Bazı sunucular (Apache2 gibi) özellikle herhangi bir "önbelleğe alma" ya izin vermek ya da reddetmek için yapılandırılmamışsa, HTTP üstbilgilerini "no-cache" olarak ayarlasanız bile varsayılan olarak "cached" yanıtı gönderebileceğini fark ettim. Bu nedenle, sunucunuzun yanıt göndermeden önce hiçbir şeyi "önbelleğe almadığından" emin olun:

Apache2 söz konusu olduğunda

1) "disk_cache.conf" dosyasını düzenleyin - önbelleği devre dışı bırakmak için "CacheDisable / local_files" yönergesini ekleyin

2) mod_cache modüllerini yükle (Ubuntu üzerinde "sudo a2enmod cache" ve "sudo a2enmod disk_cache")

3) Apache2'yi yeniden başlatın (Ubuntu "sudo service apache2 restart");

Bu, sunucular tarafında önbellek devre dışı bırakma hile yapmalıdır. Şerefe! :)


0

Bu kod size yardımcı olabilir

var sr = $("#Search Result");
sr.load("AJAX-Search.aspx?q=" + $("#q")
.val() + "&rnd=" + String((new Date).getTime())
.replace(/\D/gi, ""));
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.