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.