停止缓存jQuery .load响应


244

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

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

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

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

Answers:


419

您必须使用更复杂的功能,例如,$.ajax()如果要基于每个请求控制缓存。或者,如果您只想关闭所有功能,请将其放在脚本顶部:

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

2
谢谢!这甚至位于jQuery文档中吗?啊...找到了。有点埋葬。在一天的大部分时间里,这一切都是...脚的……再次感谢!
bytebender 2010年

35
所有这些缓存:false就是在发出请求时在URL末尾附加一个数字(我相信它是一个时间戳)。处理缓存设置的另一个地方是来自服务器或Web应用程序,方法是设置各种HTTP响应标头,例如Expires,Pragma等...
Bryan Rehbein 2010年

1
这条信息hepled我很大-它帮助我找到一个很唠叨的错误
Luke101

爱它!现在,我不必使用过于冗长的.ajax调用,而可以使用快捷方式!
Gattster 2011年

1
出色-我发现了此功能,但不知道它会像使用.load将文本文档加载到div这样简单的事情上工作
Dan

107

这是一个如何根据每个请求控制缓存的示例

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

7
我喜欢这种方式比只关闭所有缓存要好得多。
Paul Tomblin,2010年

我也喜欢不关闭所有缓存。另外,还请参阅此链接[link] stackoverflow.com/questions/4245231/…以进行过滤。
Dan Doyon

@Marshall这里的代码你没有提到POST或Get type ......所以jquery的默认值是什么?
汤玛斯(Thomas)

默认方法是GET
RichT。18年

35

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

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

编写uniqueId()的地方,每次调用时都会返回不同的内容。


1
甚至更容易,只需使用(+new Date)(或者new Date().getTime()如果您是顽固的人)。请参阅如何获取JavaScript时间戳?
第三方2014年

提出新问题并在此处链接。如果操作正确,则会生成全新的URL,因此浏览器可能无法缓存它们。
Lou Franco

用它来解决一个不相关的问题。工作请客。
亚历克斯(Alex)

9

另一种方法是仅在需要从服务器获取数据时才将下一行放入,将下一行与您的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;
}

这几乎帮了我大忙。除非回调函数具有错误的“ this”值。我将func()调用更改为以下内容以解决此问题: func.call(elem, data, textStatus, XMLHttpRequest);
GeekyMonkey 2011年

5

萨沙(Sasha)是个好主意,我混合使用。

我创建一个函数

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

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


4

这在IE中特别令人讨厌。基本上,您必须将“ no-cache” HTTP标头与服务器的响应一起发送回去。


3

对于PHP,请将以下行添加到脚本中,该脚本可提供所需的信息:

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

或者,向查询字符串添加一个唯一变量:

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

$ .ajax函数上的cache:false选项会自动将唯一变量添加到查询字符串中,就像您的第二条建议一样。
Bryan Rehbein 2010年

2

请勿使用时间戳记来创建唯一的URL,因为jquery mobile将访问的每个页面缓存在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,并相应地设置cache参数。

不要使用window.location =“”; 更改URL,否则您将导航到该地址,并且pagebeforeload不会触发。为了解决这个问题,只需使用window.location.hash =“”;


1
什么是$ jqm?$ jqm = $?$ .mobile.cache未定义
Luciuz

2

如果要坚持使用Jquery的.load()方法,请为URL添加唯一的内容,例如JavaScript时间戳。“ +新的Date()。getTime()”。注意,我必须添加一个“&time =“,以便它不会更改您的pid变量。

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

1

您可以使用将缓存设置为false的版本替换jquery加载功能。

(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标头设置为“ no-cache”,该服务器也可能默认发送“缓存”响应。因此,请确保您的服务器在发送响应之前没有“缓存”任何内容:

对于Apache2,您必须

1)编辑“ disk_cache.conf”文件-要禁用缓存,请添加“ CacheDisable / local_files”指令

2)加载mod_cache模块(在Ubuntu上为“ sudo a2enmod缓存”和“ sudo a2enmod disk_cache”)

3)重启Apache2(Ubuntu的“ sudo服务apache2重启”);

这应该可以在服务器端禁用缓存。干杯! :)


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.