web-dev-qa-db-fra.com

Empêchez la réponse jQuery .load d'être mise en cache

J'ai le code suivant faisant une demande GET sur une URL:

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

Mais le résultat renvoyé n'est pas toujours reflété. Par exemple, j'ai modifié la réponse en créant une trace de pile, mais cette trace ne s'est pas affichée lorsque j'ai cliqué sur le bouton de recherche. J'ai regardé le code PHP sous-jacent qui contrôle la réponse ajax; le code correct était affiché et la page consultée a montré le résultat correct, mais la sortie renvoyée par .load était ancienne.

Si je ferme le navigateur et le rouvre, il fonctionne une fois et commence à renvoyer les informations obsolètes. Puis-je contrôler cela avec jQuery ou dois-je avoir mes en-têtes de sortie de script PHP pour contrôler la mise en cache?

jqueryajaxcaching
240
dragonmantank

Vous devez utiliser une fonction plus complexe telle que $.ajax() si vous souhaitez contrôler la mise en cache à la demande. Ou, si vous voulez simplement le désactiver pour tout, mettez ceci en haut de votre script:

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

Voici un exemple de la façon de contrôler la mise en cache à la demande

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

Une solution consiste à ajouter un numéro unique à la fin de l'URL:

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

Où vous écrivez uniqueId () pour retourner quelque chose de différent à chaque appel.

35
Lou Franco

Une autre approche pour mettre la ligne ci-dessous uniquement lorsque cela est nécessaire pour obtenir des données du serveur, ajoutez la ligne ci-dessous avec votre URL ajax.

'? _ =' + Math.round (Math.random () * 10000)

8
Gomes
/**
 * 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;
}
6
Sasha

Sasha est une bonne idée, j'utilise un mélange.

Je crée une fonction

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

Et invoquer pour différentes parties de ma page par exemple sur init:

Init: fonction (actionUrl1, actionUrl2, actionUrl3) {

var ExampleJS = {

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

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

5
NGRAUPEN

Ceci est particulièrement contrariant dans IE. Fondamentalement, vous devez renvoyer les en-têtes HTTP "sans cache" avec votre réponse du serveur.

4
Xian

Pour PHP, ajoutez cette ligne à votre script, qui fournit les informations souhaitées:

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

ou, ajoutez une variable unique à la chaîne de requête:

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

N'utilisez PAS l'horodatage pour créer une URL unique car chaque page visitée est mise en cache dans DOM par jquery mobile et vous risquez très vite de manquer de mémoire sur les mobiles.

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

Ce code s'active avant le chargement de la page, vous pouvez utiliser url.indexOf () pour déterminer si l'URL est celle que vous souhaitez mettre en cache ou non et définir le paramètre de cache en conséquence.

N'utilisez pas window.location = ""; pour changer d'URL sinon vous allez naviguer vers l'adresse et pagebeforeload ne se déclenchera pas. Pour contourner ce problème, utilisez simplement window.location.hash = "";

2
user1545320

Vous pouvez remplacer la fonction de chargement jquery par une version dont le cache est défini sur 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);

Placez cet emplacement quelque part dans le monde où il s'exécutera après le chargement de jQuery et vous devriez être prêt. Votre code de chargement existant ne sera plus mis en cache.

1
Adam Bell

Essaye ça:

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

Cela fonctionne bien quand je l'ai utilisé.

0
user208444

J'ai remarqué que si certains serveurs (comme Apache2) ne sont pas configurés pour autoriser ou refuser spécifiquement toute "mise en cache", le serveur peut alors envoyer une réponse "mise en cache", même si vous définissez les en-têtes HTTP sur "no-cache". Assurez-vous donc que votre serveur ne "cache" rien avant d'envoyer une réponse:

Dans le cas d'Apache2, vous devez

1) éditez le fichier "disk_cache.conf" - pour désactiver le cache, ajoutez la directive "CacheDisable/local_files"

2) charger des modules mod_cache (sur Ubuntu, "cache Sudo a2enmod" et "Sudo a2enmod disk_cache")

3) redémarrez Apache2 (Ubuntu "service Sudo Apache2 restart");

Cela devrait permettre de désactiver le cache côté serveurs. À votre santé! :)

0
techexpert

Si vous souhaitez vous en tenir à la méthode .load () de Jquery, ajoutez quelque chose d'unique à l'URL, tel qu'un horodatage JavaScript. "+ nouvelle date (). getTime ()". Remarquez que je devais ajouter un "& time =" afin que cela ne modifie pas votre variable pid.

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

Ce code peut vous aider

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