Detener la respuesta de jQuery .load de que se guarde en caché

Tengo el siguiente código haciendo una solicitud GET en una URL:

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

Pero el resultado devuelto no siempre se refleja. Por ejemplo, realicé un cambio en la respuesta que escupe un rastro de la stack pero el rastro de la stack no apareció cuando hice clic en el botón de búsqueda. Miré el código subyacente de PHP que controla la respuesta de ajax y tenía el código correcto y al visitar la página se mostró directamente el resultado correcto, pero el resultado devuelto por .load era antiguo.

Si cierro el navegador y lo vuelvo a abrir, funciona una vez y luego comienza a devolver la información obsoleta. ¿Puedo controlar esto mediante jQuery o necesito tener mis encabezados de salida de script PHP para controlar el almacenamiento en caché?

Debe usar una función más compleja como $.ajax() si desea controlar el almacenamiento en caché según cada solicitud. O, si solo quieres desactivarlo para todo, pon esto en la parte superior de tu script:

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

Aquí hay un ejemplo de cómo controlar el almacenamiento en caché por solicitud

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

Una forma es agregar un número único al final de la url:

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

Donde escribe uniqueId () para devolver algo diferente cada vez que se llama.

Otro enfoque para poner la línea a continuación solo cuando se requiera para obtener datos del servidor, anexe la siguiente línea junto con su URL ajax.

‘? _ =’ + 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 es una buena idea, uso una mezcla.

Creo una función

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

E invocar diferentes partes de mi página, por ejemplo, en 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”); }},

Esto es particularmente molesto en IE. Básicamente tienes que enviar encabezados HTTP ‘no-cache’ con tu respuesta del servidor.

Para PHP, agregue esta línea a su secuencia de comandos que sirve la información que desea:

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

o, agregue una variable única a la cadena de consulta:

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

NO use la marca de tiempo para crear una URL única ya que cada página que visita está almacenada en memoria caché en DOM por jquery mobile y pronto tendrá problemas para quedarse sin memoria en los teléfonos móviles.

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

Este código se activa antes de que se cargue la página, puede usar url.indexOf () para determinar si la URL es la que desea almacenar en caché o no y establecer el parámetro de caché en consecuencia.

No use window.location = “”; para cambiar la URL, de lo contrario, navegará a la dirección y la página antes de la carga no se activará. Para evitar este problema, simplemente use window.location.hash = “”;

Puede reemplazar la función de carga jquery con una versión que tenga el caché establecido en falso.

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

Coloque esto en algún lugar global donde se ejecutará después de que se cargue jquery y debería estar todo listo. Su código de carga existente ya no se almacenará en caché.

Prueba esto:

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

Funciona bien cuando lo usé.

Noté que si algunos servidores (como Apache2) no están configurados para permitir o negar específicamente cualquier “caché”, entonces el servidor puede enviar una respuesta “en caché” por defecto, incluso si configura los encabezados HTTP a “no-caché”. Así que asegúrese de que su servidor no esté “almacenando en caché” nada antes de que presente una respuesta:

En el caso de Apache2 tienes que

1) edite el archivo “disk_cache.conf” – para deshabilitar la adición de caché directiva “CacheDisable / local_files”

2) cargar mod_cache modules (en Ubuntu “sudo a2enmod cache” y “sudo a2enmod disk_cache”)

3) reinicie Apache2 (Ubuntu “sudo service apache2 restart”);

Esto debería ser el truco para deshabilitar el caché en el lado del servidor. ¡Aclamaciones! 🙂

Este código puede ayudarte

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

Si desea seguir con el método .load () de Jquery, agregue algo único a la URL como una marca de tiempo JavaScript. “+ nueva Fecha (). getTime ()”. Tenga en cuenta que tuve que agregar un “& time =” para que no altere su variable pid.

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