Остановка на jQuery.загрузить ответ из кэширования

У меня есть следующий код, делающий запрос GET по URL:

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

но возвращаемый результат не всегда отражается. Например, я внес изменения в ответ, который выплюнул трассировку стека, но трассировка стека не появилась, когда я нажал на кнопку поиска. Я посмотрел на базовый PHP-код, который контролирует ответ ajax, и у него был правильный код, и посещение страницы напрямую показало правильный результат, но результат вернулся .груз был старый.

Если я закрываю браузер и снова открываю его, он работает один раз, а затем начинает возвращать устаревшую информацию. Могу ли я управлять этим с помощью jQuery или мне нужно иметь выходные заголовки PHP-скриптов для управления кэшированием?

235
ajax caching jquery

14 ответов

вы должны использовать более сложную функцию, такую как $.ajax() Если вы хотите управлять кэшированием на основе на запрос. Или, если вы просто хотите отключить его для всего, поместите это в верхней части вашего скрипта:

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

вот пример того, как управлять кэшированием на основе каждого запроса

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

один из способов-добавить уникальный номер в конец url:

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

где вы пишете uniqueId (), чтобы возвращать что-то другое каждый раз, когда он вызывается.

34

другой подход, чтобы поместить нижеприведенную строку только тогда,когда требуется получить данные с сервера, добавьте нижеприведенную строку вместе с url-адресом ajax.

'?_='+Математика.круглый (Math.random () * 10000)

7
/**
 * 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

Саша хорошая идея, я использую смесь.

Я создаю функцию 

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

и вызвать для различных частей моей страницы, например, на init:

Init: функция (actionUrl1, actionUrl2, actionUrl3) {

var ExampleJS= {

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

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

5

Это вызывает особое раздражение в IE. В основном вам нужно отправить HTTP-заголовки "no-cache" с вашим ответом с сервера.

4

для PHP добавьте эту строку в свой скрипт, который служит нужной вам информации:

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

или добавьте уникальную переменную в строку запроса:

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

Не используйте метку времени, чтобы сделать уникальный URL-адрес, так как для каждой страницы, которую вы посещаете, кэшируется в DOM jQuery mobile, и вы скоро столкнетесь с проблемой нехватки памяти на мобильных телефонах.

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

этот код активируется перед загрузкой страницы, вы можете использовать url.indexOf (), чтобы определить, является ли URL-адрес тем, который вы хотите кэшировать или нет, и установить параметр кэша соответственно.

Не использовать окно.location =""; чтобы изменить URL, в противном случае вы перейдете к адресу и pagebeforeload не будет стрелять. Чтобы обойти эту проблему, просто используйте window.местоположение.hash ="";

2

вы можете заменить функцию загрузки jquery версией, для которой установлено значение 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);

поместите это где-нибудь глобальный, где он будет работать после загрузки jquery, и вы должны быть настроены. Существующий код загрузки больше не будет кэшироваться.

1

попробуйте это:

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

он отлично работает, когда я его использовал.

0

Я заметил, что если некоторые серверы (например, Apache2) не настроены специально разрешать или запрещать любое "кэширование", то сервер может по умолчанию отправлять "кэшированный" ответ, даже если вы установите заголовки HTTP в "no-cache". Поэтому убедитесь, что ваш сервер не "кэширует" что-либо, прежде чем он отправит ответ:

в случае Apache2 вы должны

1) отредактируйте " disk_cache.conf "file-чтобы отключить кэш, добавьте директиву" CacheDisable /local_files"

2) нагрузка mod_cache модули (на Ubuntu "sudo a2enmod кэш" и "sudo a2enmod disk_cache")

3) перезапустите Apache2 (Ubuntu "sudo service apache2 restart");

Это должно сделать трюк отключения кэша на стороне серверов. Ура! :)

0

этот код может помочь вам

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

Если вы хотите придерживаться Jquery .метод load (), добавьте что-то уникальное в URL-адрес, например метку времени JavaScript. "+новая дата.)(метод getTime.")( Обратите внимание, что мне пришлось добавить " & time=", чтобы он не изменял вашу переменную pid.

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