Зупиніть jQuery .load відповідь від кешування


244

У мене є такий код, який робить GET-запит на URL-адресу:

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

Але повернений результат відображається не завжди. Наприклад, я змінив відповідь, яка виплюнула слід стека, але слід стека не з’явився, коли я натиснув кнопку пошуку. Я переглянув основний код PHP, який контролює відповідь ajax, і він мав правильний код, і відвідування сторінки показало правильний результат, але вихід, повернутий .load, був старим.

Якщо я закрию браузер і повторно відкрию його, він працює один раз, а потім починає повертати несвіжу інформацію. Чи можу я контролювати це за допомогою jQuery чи мені потрібно мати свої вихідні заголовки скриптів PHP для кешування кешування?

Відповіді:


419

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

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

2
спасибі! Це навіть міститься в документації на jQuery? Ааа ... знайшов. Вид ягоди. Більшу частину дня це вдарило по попу ... Ще раз дякую!
bytebender

35
Весь цей кеш: false робить, додаючи число (я вважаю його часовою позначкою) до кінця URL-адреси під час подання запиту. Інше місце для керування налаштуваннями кешу - це сервер чи веб-додаток, встановивши різні заголовки відповідей HTTP, як-от Expires, Pragma тощо ...
Брайан Рехбін

1
Ця інформація дуже потішила мене - вона допомогла мені знайти справді неприємну помилку
Luke101,

Любіть це! Тепер мені не потрібно використовувати надмірно багатослівні дзвінки .ajax і можу використовувати ярлики!
Геттстер

1
Brilliant - я знайшов цю функцію , але не знав , що це буде працювати на що - то ж просто , як завантаження текстового документа в DIV з допомогою .load
Dan

107

Ось приклад того, як контролювати кешування на основі запиту

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

7
Мені цей спосіб подобається набагато краще, ніж просто вимкнути кешування.
Пол Томблін

Мені також подобається, що не вимикаю кешування. Крім того, подивіться на цю публікацію також [посилання] stackoverflow.com/questions/4245231/… для фільтрації.
Ден Дойон

@Marshall код тут і не давав згадати POST або Get type ...... так що за замовчуванням jquery?
Томас

метод за замовчуванням GET
Rich T.

35

Один із способів - додати унікальне число до кінця URL-адреси:

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

Де ви пишете uniqueId (), щоб повертати щось інше кожного разу, коли воно викликається.


1
Ще простіше, просто використовуйте (+new Date)(або new Date().getTime()якщо ви налепитесь). Див. Як отримати позначку часу в JavaScript?
третина

Задайте нове запитання і зв’яжіть його тут. Якщо ви зробили це правильно, ви генеруєте абсолютно нові URL-адреси, тому браузер їх не може кешувати.
Лу Франко

використовував це для вирішення непов'язаної проблеми. працює частування.
Олексій

9

Інший підхід, щоб поставити рядок нижче лише тоді, коли потрібно отримати дані з сервера, Додайте рядок нижче разом із вашим 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;
}

Це майже зробило для мене трюк. За винятком того, що функція зворотного дзвінка має неправильне значення "це". Я змінив дзвінок func (), щоб виправити це: func.call(elem, data, textStatus, XMLHttpRequest);
GeekyMonkey,

5

Саша - це гарна ідея, я використовую мікс.

Я створюю функцію

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"); }},


4

Це викликає особливе роздратування в IE. По суті, ви повинні відправити HTTP-заголовки без кешування назад з відповіддю від сервера.


3

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

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

або додати унікальну змінну до рядка запиту:

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

Параметр кеш: помилка функції $ .ajax автоматично додає унікальну змінну до рядка запиту, як і ваша друга пропозиція.
Брайан Рехбін

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-адреса потрібна для кешування чи ні, і встановити параметр кешу відповідно.

Не використовувати window.location = ""; щоб змінити URL, інакше ви перейдете до адреси, і сторінка перед завантаженням не запустить. Для подолання цієї проблеми просто скористайтеся window.location.hash = "";


1
що таке $ jqm? $ jqm = $? $ .mobile.cache не визначено
Луцюз

2

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

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

1

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


0

Спробуйте це:

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

Він добре працює, коли я ним користувався.


0

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

У випадку з 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 перезапустити");

Це повинно зробити трюк відключення кешу на стороні серверів. Ура! :)


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.