Остановить кеширование ответа jQuery .load
У меня есть следующий код, делающий запрос GET на URL:
$('#searchButton').click(function() {
$('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val());
});
Но возвращаемый результат не всегда отражается. Например, я внес изменение в ответ, которое выдает след стека, но след стека не появился, когда я нажал на кнопку поиска. Я посмотрел на базовый код PHP, который контролирует ответ ajax, и он содержал правильный код, и посещение страницы напрямую показало правильный результат, но результат, возвращаемый.load, был старым.
Если я закрою браузер и снова открою его, он будет работать один раз, а затем начнет возвращать устаревшую информацию. Могу ли я контролировать это с помощью jQuery или мне нужно иметь выходные заголовки PHP-скрипта для управления кэшированием?
14 ответов
Вы должны использовать более сложную функцию, такую как $.ajax() если вы хотите контролировать кэширование на основе запроса. Или, если вы просто хотите отключить его для всего, поместите это в верхнюю часть вашего скрипта:
$.ajaxSetup ({
// Disable caching of AJAX responses
cache: false
});
Вот пример того, как управлять кэшированием для каждого запроса
$.ajax({
url: "/YourController",
cache: false,
dataType: "html",
success: function(data) {
$("#content").html(data);
}
});
Одним из способов является добавление уникального номера в конец URL:
$('#inquiry').load('/portal/?f=searchBilling&pid=' + $('#query').val()+'&uid='+uniqueId());
Где вы пишете uniqueId(), чтобы каждый раз вызывать что-то новое
Другой способ поместить строку ниже только тогда, когда требуется получить данные с сервера, добавьте строку ниже вместе с вашим URL-адресом ajax.
?_='+Math.round(Math.random()*10000)
/**
* 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;
}
Саша хорошая идея, я использую микс.
Я создаю функцию
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"); }},
Это особенно раздражает в IE. По сути, вы должны отправлять HTTP-заголовки "без кеша" обратно вместе с вашим ответом с сервера.
Для PHP добавьте эту строку в ваш скрипт, который предоставляет нужную вам информацию:
header("cache-control: no-cache");
или добавьте уникальную переменную в строку запроса:
"/portal/?f=searchBilling&x=" + (new Date()).getTime()
НЕ используйте временную метку для создания уникального 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 = "";
Если вы хотите использовать метод Jquery.load(), добавьте в URL что-то уникальное, например временную метку JavaScript. msgstr "+ новая дата ().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, и вы должны быть готовы. Ваш существующий код загрузки больше не будет кэшироваться.
Я заметил, что если некоторые серверы (например, 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");
Это должно сделать хитрость отключения кэша на стороне сервера. Ура!:)
Этот код может помочь вам
var sr = $("#Search Result");
sr.load("AJAX-Search.aspx?q=" + $("#q")
.val() + "&rnd=" + String((new Date).getTime())
.replace(/\D/gi, ""));
Попробуй это:
$("#Search_Result").load("AJAX-Search.aspx?q=" + $("#q").val() + "&rnd=" + String((new Date()).getTime()).replace(/\D/gi, ''));
Он отлично работает, когда я его использовал.