Hentikan jQuery .load respons agar tidak di-cache


244

Saya memiliki kode berikut yang membuat permintaan GET pada URL:

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

Tetapi hasil yang dikembalikan tidak selalu tercermin. Sebagai contoh, saya membuat perubahan pada respons yang memuntahkan jejak tumpukan tetapi jejak tumpukan tidak muncul ketika saya mengklik tombol pencarian. Saya melihat kode PHP yang mendasari yang mengontrol respon ajax dan memiliki kode yang benar dan mengunjungi halaman secara langsung menunjukkan hasil yang benar tetapi output yang dikembalikan oleh .load sudah tua.

Jika saya menutup browser dan membukanya kembali itu berfungsi sekali dan kemudian mulai mengembalikan informasi basi. Bisakah saya mengontrol ini dengan jQuery atau apakah saya perlu memiliki header output skrip PHP untuk mengontrol caching?

Jawaban:


419

Anda harus menggunakan fungsi yang lebih kompleks seperti $.ajax()jika Anda ingin mengontrol caching berdasarkan permintaan. Atau, jika Anda hanya ingin mematikannya untuk semuanya, letakkan ini di bagian atas skrip Anda:

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

2
Terima kasih! Apakah ini bahkan terdapat di dokumentasi jQuery? Ahh ... menemukannya. Jenis buah beri. Ini telah menendang pantat hampir sepanjang hari ... Terima kasih lagi!
bytebender

35
Semua cache ini: false tidak menambahkan nomor (saya percaya ini cap waktu) ke akhir url ketika membuat permintaan. Tempat lain untuk menangani pengaturan cache adalah dari server atau aplikasi web dengan mengatur berbagai header respons HTTP, seperti Kedaluwarsa, Pragma, dll ...
Bryan Rehbein

1
Sepotong informasi ini sangat meresahkan saya - ini membantu saya menemukan bug yang sangat mengganggu
Luke101

Suka! Sekarang saya tidak perlu menggunakan panggilan .ajax yang terlalu banyak bicara dan bisa menggunakan pintasan!
Gattster

1
Brilliant - Saya telah menemukan fungsi ini tetapi tidak tahu itu akan bekerja pada sesuatu yang sederhana seperti memuat dokumen teks ke dalam div menggunakan .load
Dan

107

Berikut adalah contoh cara mengontrol caching berdasarkan per-permintaan

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

7
Saya suka cara ini jauh lebih baik daripada hanya mematikan semua caching.
Paul Tomblin

Saya juga suka ini karena tidak mematikan semua caching. Juga, Lihat posting ini juga [tautan] stackoverflow.com/questions/4245231/… untuk pemfilteran.
Dan Doyon

@ Marshall kode di sini Anda memberi tidak menyebutkan POST atau Dapatkan tipe ...... jadi apa default untuk jquery?
Thomas

metode default adalah GET
Rich T.

35

Salah satu caranya adalah dengan menambahkan nomor unik ke bagian akhir url:

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

Di mana Anda menulis uniqueId () untuk mengembalikan sesuatu yang berbeda setiap kali dipanggil.


1
Lebih mudah lagi, cukup gunakan (+new Date)(atau new Date().getTime()jika Anda ngotot). Lihat Bagaimana Anda mendapatkan cap waktu dalam JavaScript?
thirdender

Ajukan pertanyaan baru dan tautkan di sini. Jika Anda melakukannya dengan benar, Anda menghasilkan URL yang sama sekali baru, sehingga tidak mungkin di-cache oleh browser.
Lou Franco

menggunakan ini untuk memecahkan masalah yang tidak terkait. bekerja menyenangkan.
Alex

9

Pendekatan lain untuk meletakkan baris di bawah ini hanya ketika perlu untuk mendapatkan data dari server, tambahkan baris di bawah ini bersama dengan url ajax Anda.

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

Ini hampir berhasil bagi saya. Kecuali fungsi callback memiliki nilai "ini" yang salah. Saya mengubah panggilan func () ke yang berikut untuk memperbaikinya: func.call(elem, data, textStatus, XMLHttpRequest);
GeekyMonkey

5

Sasha adalah ide bagus, saya menggunakan campuran.

Saya membuat fungsi

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

Dan panggil untuk bagian yang berbeda dari halaman saya misalnya di init:

Init: function (actionUrl1, actionUrl2, actionUrl3) {

var ExampleJS = {

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

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


4

Ini adalah gangguan khusus di IE. Pada dasarnya Anda harus mengirim header HTTP 'tanpa cache' kembali dengan respons Anda dari server.


3

Untuk PHP, tambahkan baris ini ke skrip Anda yang menyajikan informasi yang Anda inginkan:

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

atau, tambahkan variabel unik ke string kueri:

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

Cache: opsi salah pada fungsi $ .ajax secara otomatis menambahkan variabel unik ke string kueri seperti saran kedua Anda.
Bryan Rehbein

2

JANGAN gunakan cap waktu untuk membuat URL unik karena setiap halaman yang Anda kunjungi di-cache dalam DOM oleh jquery mobile dan Anda segera mengalami kesulitan kehabisan memori pada ponsel.

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

Kode ini diaktifkan sebelum halaman dimuat, Anda dapat menggunakan url.indexOf () untuk menentukan apakah URL yang ingin Anda cache atau tidak dan mengatur parameter cache yang sesuai.

Jangan gunakan window.location = ""; untuk mengubah URL jika tidak Anda akan menavigasi ke alamat dan pagebeforeload tidak akan diaktifkan. Untuk mengatasi masalah ini cukup gunakan window.location.hash = "";


1
apa $ jqm? $ jqm = $? $ .mobile.cache tidak ditentukan
Luciuz

2

Jika Anda ingin tetap menggunakan metode .load () Jquery, tambahkan sesuatu yang unik ke URL seperti cap waktu JavaScript. "+ Tanggal baru (). getTime ()". Perhatikan saya harus menambahkan "& waktu =" sehingga tidak mengubah variabel pid Anda.

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

1

Anda dapat mengganti fungsi memuat jquery dengan versi yang cache disetel ke 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);

Tempatkan ini di suatu tempat global di mana ia akan berjalan setelah banyak jquery dan Anda harus siap. Kode muat Anda yang ada tidak akan lagi di-cache.


0

Coba ini:

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

Ini berfungsi dengan baik ketika saya menggunakannya.


0

Saya perhatikan bahwa jika beberapa server (seperti Apache2) tidak dikonfigurasikan untuk secara khusus mengizinkan atau menolak "caching", maka server dapat secara default mengirim respons "cached", bahkan jika Anda mengatur header HTTP ke "no-cache". Jadi pastikan server Anda tidak "menyimpan" apa pun sebelum mengirimkan respons:

Dalam hal Apache2 Anda harus

1) edit file "disk_cache.conf" - untuk menonaktifkan cache tambahkan direktif "CacheDisable / local_files"

2) memuat modul mod_cache (Di Ubuntu "sudo a2enmod cache" dan "sudo a2enmod disk_cache")

3) restart Apache2 (Ubuntu "sudo service apache2 restart");

Ini harus melakukan trik menonaktifkan cache di sisi server. Bersulang! :)


0

Kode ini dapat membantu Anda

var sr = $("#Search Result");
sr.load("AJAX-Search.aspx?q=" + $("#q")
.val() + "&rnd=" + String((new Date).getTime())
.replace(/\D/gi, ""));
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.