Ferma la risposta nella cache di jQuery .load


244

Ho il seguente codice che fa una richiesta GET su un URL:

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

Ma il risultato restituito non si riflette sempre. Ad esempio, ho apportato una modifica alla risposta che ha sputato una traccia dello stack ma la traccia dello stack non è stata visualizzata quando ho fatto clic sul pulsante di ricerca. Ho guardato il codice PHP sottostante che controlla la risposta ajax e aveva il codice corretto e visitare la pagina ha mostrato direttamente il risultato corretto ma l'output restituito da .load era vecchio.

Se chiudo il browser e lo riapro, funziona una volta, quindi inizia a restituire le informazioni non aggiornate. Posso controllare questo tramite jQuery o devo avere le intestazioni di output dello script PHP per controllare la memorizzazione nella cache?

Risposte:


419

È necessario utilizzare una funzione più complessa come $.ajax()se si desidera controllare la memorizzazione nella cache in base alla richiesta. Oppure, se vuoi semplicemente disattivarlo per tutto, mettilo in cima allo script:

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

2
grazie! Si trova anche nella documentazione di jQuery? Ahh ... l'ho trovato. Tipo di moglie. Questo è stato un calcio a calci per la maggior parte della giornata ... Grazie ancora!
bytebender,

35
Tutta questa cache: false fa è aggiungere un numero (credo che sia un timestamp) alla fine di un URL quando si effettua la richiesta. L'altro posto dove gestire le impostazioni della cache proviene dal server o dall'app Web impostando varie intestazioni di risposta HTTP, come Scadenza, Pragma, ecc ...
Bryan Rehbein

1
Questa informazione mi ha aiutato moltissimo - mi ha aiutato a individuare un bug davvero fastidioso
Luke101

Lo adoro! Ora non devo usare chiamate .ajax eccessivamente dettagliate e posso usare le scorciatoie!
Gattster,

1
Fantastico - avevo trovato questa funzione ma non sapevo che avrebbe funzionato su qualcosa di semplice come caricare un documento di testo in un div usando .load
Dan

107

Ecco un esempio di come controllare la memorizzazione nella cache in base alla richiesta

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

7
Mi piace in questo modo molto meglio che semplicemente disattivare tutta la cache.
Paul Tomblin,

Mi piace anche questo per non aver disattivato tutta la cache. Inoltre, guarda questo post anche [link] stackoverflow.com/questions/4245231/… per il filtraggio.
Dan Doyon,

@Marshall qui il codice che hai dato non menziona POST o Ottieni tipo ...... quindi qual è l'impostazione predefinita per jquery?
Thomas

il metodo predefinito è GET
Rich T.

35

Un modo è aggiungere un numero univoco alla fine dell'URL:

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

Dove scrivi uniqueId () per restituire qualcosa di diverso ogni volta che viene chiamato.


1
Ancora più semplice, basta usare (+new Date)(o new Date().getTime()se sei un pignolo). Vedi Come si ottiene un timestamp in JavaScript?
terzo

Fai una nuova domanda e collegala qui. Se hai fatto bene, stai generando URL completamente nuovi, quindi non possono essere memorizzati nella cache dal browser.
Lou Franco,

usato questo per risolvere un problema non correlato. funziona a meraviglia.
Alex,

9

Un altro approccio per inserire la riga di seguito solo quando è necessario ottenere dati dal server, aggiungere la riga di seguito insieme all'URL Ajax.

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

Questo ha quasi fatto il trucco per me. Tranne che la funzione di callback ha il valore "this" errato. Ho modificato la chiamata di func () a quanto segue per risolvere questo problema: func.call(elem, data, textStatus, XMLHttpRequest);
GeekyMonkey,

5

Sasha è una buona idea, io uso un mix.

Creo una funzione

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

E invoco per diverse parti della mia pagina, ad esempio su init:

Init: function (actionUrl1, actionUrl2, actionUrl3) {

var EsempioJS = {

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

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


4

Questo è di particolare fastidio in IE. Fondamentalmente devi rispedire le intestazioni HTTP "no-cache" con la tua risposta dal server.


3

Per PHP, aggiungi questa riga al tuo script che serve le informazioni che desideri:

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

oppure aggiungi una variabile univoca alla stringa di query:

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

L'opzione cache: false sulla funzione $ .ajax aggiunge automaticamente la variabile univoca alla stringa di query come il tuo secondo suggerimento.
Bryan Rehbein,

2

NON utilizzare il timestamp per creare un URL univoco in quanto ogni pagina visitata viene memorizzata nella cache in DOM da jquery mobile e presto si verificano problemi di esaurimento della memoria sui cellulari.

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

Questo codice si attiva prima del caricamento della pagina, è possibile utilizzare url.indexOf () per determinare se l'URL è quello che si desidera memorizzare nella cache o meno e impostare il parametro cache di conseguenza.

Non utilizzare window.location = ""; per modificare l'URL, altrimenti si accederà all'indirizzo e il caricamento della pagina non verrà eseguito. Per aggirare questo problema, usa semplicemente window.location.hash = "";


1
che cos'è $ jqm? $ jQm = $? $ .mobile.cache non è definito
Luciuz,

2

Se si desidera attenersi al metodo .load () di Jquery, aggiungere qualcosa di unico all'URL come un timestamp JavaScript. "+ nuova data (). getTime ()". Nota che ho dovuto aggiungere un "& time =" in modo che non cambi la tua variabile pid.

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

1

È possibile sostituire la funzione di caricamento jquery con una versione con cache impostata su 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);

Posizionalo in un punto globale dove verrà eseguito dopo il caricamento di jquery e dovresti essere pronto. Il codice di carico esistente non verrà più memorizzato nella cache.


0

Prova questo:

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

Funziona bene quando l'ho usato.


0

Ho notato che se alcuni server (come Apache2) non sono configurati per consentire o negare specificamente qualsiasi "memorizzazione nella cache", il server potrebbe inviare di default una risposta "memorizzata nella cache", anche se si impostano le intestazioni HTTP su "no-cache". Quindi assicurati che il tuo server non stia "memorizzando nella cache" nulla prima di inviare una risposta:

Nel caso di Apache2 devi farlo

1) modifica il file "disk_cache.conf" - per disabilitare la cache aggiungi la direttiva "CacheDisable / local_files"

2) carica i moduli mod_cache (su Ubuntu "sudo a2enmod cache" e "sudo a2enmod disk_cache")

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

Questo dovrebbe fare il trucco disabilitando la cache sul lato server. Saluti! :)


0

Questo codice può aiutarti

var sr = $("#Search Result");
sr.load("AJAX-Search.aspx?q=" + $("#q")
.val() + "&rnd=" + String((new Date).getTime())
.replace(/\D/gi, ""));
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.