Остановить кеширование ответа jQuery .load

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

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

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

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

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
246
0
169 590
14
Перейти к ответу Данный вопрос помечен как решенный

Ответы 14

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

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

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

Еще проще, просто используйте (+new Date) (или new Date().getTime(), если вы приверженец). См. Как получить метку времени в JavaScript?

thirdender 04.01.2014 03:58

Задайте новый вопрос и дайте ссылку здесь. Если вы все сделали правильно, вы создаете совершенно новые URL-адреса, поэтому они не могут быть кэшированы браузером.

Lou Franco 06.05.2015 22:09

использовал это для решения несвязанной проблемы. работает угощение.

Alex 14.02.2017 07:35

Это особенно раздражает в IE. Обычно вы должны отправлять HTTP-заголовки без кеширования вместе с ответом с сервера.

Ответ принят как подходящий

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

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

благодарю вас! Это вообще находится в документации jQuery? Ах ... нашел. Вид ягодный. Это продолжалось большую часть дня ... Еще раз спасибо!

bytebender 19.02.2010 23:30

Весь этот cache: false добавляет число (я считаю, что это временная метка) в конец URL-адреса при выполнении запроса. Другое место для обработки настроек кеша - это сервер или веб-приложение, устанавливая различные заголовки HTTP-ответа, такие как Expires, Pragma и т. д.

Bryan Rehbein 15.03.2010 17:35

Эта информация меня очень обрадовала - она ​​помогла мне найти действительно назойливую ошибку.

Luke101 10.05.2010 06:37

Любить это! Теперь мне не нужно использовать излишне подробные вызовы .ajax, и я могу использовать ярлыки!

Gattster 01.06.2011 05:05

Великолепно - я нашел эту функцию, но не знал, что она будет работать с чем-то настолько простым, как загрузка текстового документа в div с использованием .load

Dan 25.01.2012 20:35

Я считаю, что кеширование лучше настраивать на стороне сервера. Почему сервер кеширует ваши запросы? Это может быть проблема конфигурации apache или nginx, если вы их используете. jQuery просто добавляет параметр отметки времени к запросу, генерирующему новые и новые идентификаторы. Но и браузер, и веб-сервер по-прежнему кэшируют эти запросы, даже возвращая действительные ответы. Наличие большого количества вызовов ajax "cache: false" jQuery может снизить эффективность кеширования.

Grimmo 21.05.2012 14:54

Отлично, я только что наткнулся на это! Я всегда использую подробный способ .ajax.

Rippo 17.08.2012 16:11

Спасибо вам миллион раз! Это решило проблему, на которую я тратил столько времени! Я даже пробовал случайные запросы GET, чтобы обмануть браузер, но ничего не помогло. СПАСИБО СПАСИБО СПАСИБО

william44isme 06.12.2013 01:16

Спасибо! это заставило меня почесать голову, так как проблема с кешированием ajax возникала только на одном компьютере парня в IE: /

Sam 22.04.2014 14:51

Кто-нибудь знает, почему Microsoft решила, что кэширование ответов Ajax - хорошая идея?

markthewizard1234 05.05.2016 12:33

Прекрасно, использование .load на аккордеоне при открытии, это решило проблему, просто добавьте код в том виде, как он есть до того, как произойдет какой-либо .load, и каждый раз, когда .load выполняется, он будет получать новый набор данных с использованием .load .... .Благодарность

Mikeys4u 23.03.2017 16:19

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

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

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

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

Параметр cache: false в функции $ .ajax автоматически добавляет уникальную переменную в строку запроса, как ваше второе предложение.

Bryan Rehbein 15.03.2010 17:36

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

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

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

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

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

Мне этот способ нравится больше, чем просто отключить кеширование.

Paul Tomblin 23.11.2010 01:33

Еще мне нравится то, что не отключено все кеширование. Также посмотрите этот пост [ссылка] stackoverflow.com/questions/4245231/… для фильтрации.

Dan Doyon 14.03.2011 21:50

@Marshall код здесь вы не упомянули тип POST или Get ...... так что по умолчанию для jquery?

Thomas 02.03.2016 15:14

метод по умолчанию - GET

Rich T. 03.04.2018 23:54

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

Это почти помогло мне. За исключением того, что функция обратного вызова имеет неправильное значение «this». Чтобы исправить это, я изменил вызов func () на следующее: func.call(elem, data, textStatus, XMLHttpRequest);

GeekyMonkey 25.02.2011 16:58

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

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

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

И вызывать разные части моей страницы, например, в 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»); } },

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

В случае Apache2 вам необходимо

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

2) загрузить модули mod_cache (в Ubuntu «sudo a2enmod cache» и «sudo a2enmod disk_cache»)

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

Это должно помочь отключить кеш на стороне серверов. Ваше здоровье! :)

НЕ используйте метку времени для создания уникального 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 тем, который вы хотите кэшировать, и установить соответствующий параметр кеширования.

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

что такое $ jqm? $ jqm = $? $ .mobile.cache не определен

Luciuz 19.02.2013 11:34

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

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

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

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

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

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

Вы можете заменить функцию загрузки 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, и все должно быть настроено. Ваш существующий код загрузки больше не будет кэшироваться.

Другие вопросы по теме