Hentikan jQuery .load respons agar tidak di-cache

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?

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

Berikut adalah contoh cara mengontrol caching berdasarkan per-permintaan

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

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.

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)

/**
 * 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;
}

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"); }},

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

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

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 = "";

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

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.

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.

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! :)

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, ""));