停止缓存jQuery .load响应

我有以下代码对URL进行GET请求:

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

但是返回的结果并不总是被反映出来。例如，我对输出堆栈跟踪的响应进行了更改，但是当我单击搜索按钮时，堆栈跟踪没有出现。我查看了控制ajax响应的底层PHP代码，它有正确的代码，直接访问页面显示了正确的结果，但.load返回的输出是旧的。

如果我关闭浏览器并重新打开它，它会工作一次，然后开始返回陈旧的信息。我可以通过jQuery控制这一点，还是我需要有我的PHP脚本输出头来控制缓存?

173422 次浏览
小开

一种方法是在url的末尾添加一个唯一的数字:

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

在这里，您编写uniqueId()以在每次调用时返回不同的内容。

小开

这在IE中是一个特别烦人的问题。基本上你必须从服务器发送“无缓存”的HTTP头和响应。

小开
最佳答案

如果你想在每个请求的基础上控制缓存，你必须使用更复杂的函数，如$.ajax()。或者，如果你只是想关闭它，把这个放在你的脚本顶部:

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

对于PHP，添加这一行到你的脚本，它提供了你想要的信息:

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

或者，在查询字符串中添加一个唯一的变量:

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

试试这个:

$("#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);
}
});
小开 
/**
* 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:

初始化:函数(actionUrl1, actionUrl2, actionUrl3) {

var ExampleJS= {

Init: function (actionUrl1, actionUrl2, actionUrl3)           ExampleJS.LoadWithoutCache(actionUrl1, "div1");
< p > ExampleJS。LoadWithoutCache (actionUrl2“div2”); ExampleJS。LoadWithoutCache (actionUrl3“div3”); ｝ }, < / p >
小开

我注意到，如果某些服务器(如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 restart”);

这应该在服务器端禁用缓存。 干杯!:) < / p >
小开

不要使用时间戳来创建一个唯一的URL，因为你访问的每个页面都是由jquery移动缓存在DOM中，你很快就会遇到移动内存不足的麻烦。

$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是否是您想要缓存的URL，并相应地设置缓存参数。

不要使用窗户。Location = "";要改变URL，否则你将导航到地址和pagebeforeload不会火。为了解决这个问题，只需使用window.location.hash = "";

小开

另一种方法是只在需要从服务器获取数据时才添加下面的行，将下面的行与您的ajax url一起附加。

”? _ = ' + 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());
});
小开

你可以用缓存设置为false的版本替换jquery load函数。

(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加载后运行，你应该都设置好了。您现有的加载代码将不再被缓存。


提交答案