Verhindern Sie, dass die Antwort von jQuery .load zwischengespeichert wird


244

Ich habe den folgenden Code, der eine GET-Anfrage für eine URL stellt:

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

Das zurückgegebene Ergebnis wird jedoch nicht immer wiedergegeben. Zum Beispiel habe ich eine Änderung in der Antwort vorgenommen, die eine Stapelverfolgung ausspuckte, aber die Stapelverfolgung wurde nicht angezeigt, als ich auf die Suchschaltfläche geklickt habe. Ich habe mir den zugrunde liegenden PHP-Code angesehen, der die Ajax-Antwort steuert, und er hatte den richtigen Code. Der direkte Besuch der Seite zeigte das richtige Ergebnis, aber die von .load zurückgegebene Ausgabe war alt.

Wenn ich den Browser schließe und wieder öffne, funktioniert er einmal und gibt dann die veralteten Informationen zurück. Kann ich dies über jQuery steuern oder benötige ich meine PHP-Skriptausgabeheader, um das Caching zu steuern?

Antworten:


419

Sie müssen eine komplexere Funktion verwenden, z. B. $.ajax()wenn Sie das Caching pro Anforderung steuern möchten. Wenn Sie es nur für alles deaktivieren möchten, setzen Sie dies oben in Ihr Skript:

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

2
Danke! Befindet sich dies überhaupt in der jQuery-Dokumentation? Ahh ... habe es gefunden. Art von Beeren. Das hatte den größten Teil des Tages mit dem Hintern gekickt ... Nochmals vielen Dank!
Bytebender

35
Alles, was dieser Cache: false tut, ist, eine Nummer (ich glaube, es ist ein Zeitstempel) an das Ende einer URL anzuhängen, wenn die Anfrage gestellt wird. Der andere Ort, an dem die Cache-Einstellungen vorgenommen werden, ist der Server oder die Web-App, indem verschiedene HTTP-Antwortheader wie Expires, Pragma usw. festgelegt werden.
Bryan Rehbein

1
Diese Information hat mich sehr beeindruckt - sie hat mir geholfen, einen wirklich
quälenden

Liebe es! Jetzt muss ich keine übermäßig ausführlichen .ajax-Aufrufe verwenden und kann die Verknüpfungen verwenden!
Gattster

1
Genial - Ich hatte diese Funktion gefunden, wusste aber nicht, dass sie bei etwas so Einfachem wie dem Laden eines Textdokuments in ein Div mit .load funktionieren würde
Dan

107

Hier ist ein Beispiel für die Steuerung des Caching pro Anforderung

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

7
Ich mag diesen Weg weitaus besser, als nur das Caching auszuschalten.
Paul Tomblin

Ich mag das auch, weil ich nicht das gesamte Caching ausschalte. Schauen Sie sich in diesem Beitrag auch [link] stackoverflow.com/questions/4245231/… zum Filtern an.
Dan Doyon

@ Marshall der Code hier u gegeben POST oder Get-Typ nicht erwähnt ...... also was ist Standard für jquery?
Thomas

Standardmethode ist GET
Rich T.

35

Eine Möglichkeit besteht darin, am Ende der URL eine eindeutige Nummer hinzuzufügen:

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

Wo Sie uniqueId () schreiben, um bei jedem Aufruf etwas anderes zurückzugeben.


1
Noch einfacher, verwenden Sie einfach (+new Date)(oder new Date().getTime()wenn Sie ein Stickler sind). Siehe Wie erhalten Sie einen Zeitstempel in JavaScript?
Thirdender

Stellen Sie eine neue Frage und verlinken Sie sie hier. Wenn Sie es richtig gemacht haben, generieren Sie völlig neue URLs, sodass diese möglicherweise nicht vom Browser zwischengespeichert werden können.
Lou Franco

nutzte dies, um ein nicht verwandtes Problem zu lösen. arbeitet ein Vergnügen.
Alex

9

Ein weiterer Ansatz, um die folgende Zeile nur dann einzufügen, wenn Daten vom Server abgerufen werden müssen. Fügen Sie die folgende Zeile zusammen mit Ihrer Ajax-URL hinzu.

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

Das hat fast den Trick für mich getan. Außer die Rückruffunktion hat den falschen "this" -Wert. Ich habe den Aufruf von func.call(elem, data, textStatus, XMLHttpRequest);
func

5

Sasha ist eine gute Idee, ich benutze eine Mischung.

Ich erstelle eine Funktion

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

Und rufen Sie für verschiedene Teile meiner Seite auf, zum Beispiel auf 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

Dies ist im IE besonders ärgerlich. Grundsätzlich müssen Sie HTTP-Header ohne Cache mit Ihrer Antwort vom Server zurücksenden.


3

Fügen Sie für PHP diese Zeile zu Ihrem Skript hinzu, das die gewünschten Informationen enthält:

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

Oder fügen Sie der Abfragezeichenfolge eine eindeutige Variable hinzu:

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

Die Option cache: false in der Funktion $ .ajax fügt der Abfragezeichenfolge automatisch die eindeutige Variable hinzu, wie bei Ihrem zweiten Vorschlag.
Bryan Rehbein

2

Verwenden Sie KEINEN Zeitstempel, um eine eindeutige URL zu erstellen, da jede Seite, die Sie besuchen, von jquery mobile im DOM zwischengespeichert wird und Sie bald Probleme haben, auf Mobiltelefonen nicht mehr genügend Speicherplatz zu haben.

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

Dieser Code wird aktiviert, bevor die Seite geladen wird. Mit url.indexOf () können Sie feststellen, ob die URL diejenige ist, die Sie zwischenspeichern möchten oder nicht, und den Cache-Parameter entsprechend festlegen.

Verwenden Sie nicht window.location = ""; Wenn Sie die URL ändern möchten, navigieren Sie zur Adresse und die Seite vor dem Laden wird nicht ausgelöst. Um dieses Problem zu umgehen, verwenden Sie einfach window.location.hash = "";


1
Was ist der $ jqm? $ jqm = $? $ .mobile.cache ist undefiniert
Luciuz

2

Wenn Sie sich an die .load () -Methode von Jquery halten möchten, fügen Sie der URL etwas Einzigartiges hinzu, z. B. einen JavaScript-Zeitstempel. "+ neues Datum (). getTime ()". Beachten Sie, dass ich ein "& time =" hinzufügen musste, damit Ihre PID-Variable nicht geändert wird.

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

1

Sie können die jquery load-Funktion durch eine Version ersetzen, deren Cache auf false gesetzt ist.

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

Platzieren Sie dies an einem globalen Ort, an dem es nach dem Laden der Abfrage ausgeführt wird, und Sie sollten bereit sein. Ihr vorhandener Ladecode wird nicht mehr zwischengespeichert.


0

Versuche dies:

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

Es funktioniert gut, wenn ich es benutzt habe.


0

Ich habe festgestellt, dass der Server standardmäßig eine "zwischengespeicherte" Antwort senden kann, wenn einige Server (wie Apache2) nicht so konfiguriert sind, dass sie ein "Caching" zulassen oder verweigern, selbst wenn Sie die HTTP-Header auf "No-Cache" setzen. Stellen Sie also sicher, dass Ihr Server nichts "zwischenspeichert", bevor er eine Antwort sendet:

Im Fall von Apache2 müssen Sie

1) Bearbeiten Sie die Datei "disk_cache.conf". Um den Cache zu deaktivieren, fügen Sie die Anweisung "CacheDisable / local_files" hinzu

2) mod_cache-Module laden (Unter Ubuntu "sudo a2enmod cache" und "sudo a2enmod disk_cache")

3) Starten Sie den Apache2 neu (Ubuntu "sudo service apache2 restart");

Dies sollte den Trick machen, den Cache auf der Serverseite zu deaktivieren. Prost! :) :)


0

Dieser Code kann Ihnen helfen

var sr = $("#Search Result");
sr.load("AJAX-Search.aspx?q=" + $("#q")
.val() + "&rnd=" + String((new Date).getTime())
.replace(/\D/gi, ""));
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.