jQuery加载缓存问题：修改LM_overzicht.html后刷新不生效求解决

我来给你几个亲测有效的解决方案，专门针对你遇到的这种修改LM_overzicht.html后普通刷新看不到更新、只有强制刷新才生效的顽固缓存问题：

方案1：给请求URL添加随机参数（最直接的客户端解决方案） #

浏览器的缓存是基于请求URL的，只要每次请求的URL不一样，它就不会复用旧缓存。你可以给load的URL加上当前时间戳，让每次请求的地址都唯一：

$(document).ready(function(){
  // 用时间戳作为随机参数，确保每次请求URL不同
  $("#LM2").load("LM_overzicht.html?" + new Date().getTime());
});

这个方法简单粗暴，立刻就能生效，不需要改服务器配置。

方案2：服务器端设置缓存控制响应头（最彻底的解决方案） #

客户端的meta标签有时候会被浏览器忽略，尤其是静态HTML文件。直接在服务器端给LM_overzicht.html设置禁止缓存的响应头，优先级更高：

如果你用Apache服务器 #

在网站根目录的.htaccess文件中添加以下代码：

<Files "LM_overzicht.html">
  Header set Cache-Control "no-cache, no-store, must-revalidate"
  Header set Pragma "no-cache"
  Header set Expires 0
</Files>

如果你用Nginx服务器 #

在站点配置文件中添加：

location = /LM_overzicht.html {
  add_header Cache-Control "no-cache, no-store, must-revalidate";
  add_header Pragma "no-cache";
  add_header Expires 0;
}

配置完成后重启服务器，浏览器就会彻底放弃缓存这个文件，每次都从服务器拉取最新内容。

方案3：改用手动AJAX请求替代load方法 #

load其实是jQuery对AJAX的封装，有时候直接写AJAX请求能更明确地控制缓存行为，避免封装层的潜在问题：

$(document).ready(function(){
  $.ajax({
    url: "LM_overzicht.html",
    cache: false, // 明确禁止缓存
    success: function(data){
      $("#LM2").html(data);
    }
  });
});

方案4：使用现代Fetch API强制刷新缓存 #

如果你的网站不需要兼容太老的浏览器，可以用Fetch API的cache: 'reload'选项，强制浏览器从服务器重新获取文件：

$(document).ready(function(){
  fetch("LM_overzicht.html", { cache: 'reload' })
    .then(response => response.text())
    .then(data => {
      $("#LM2").html(data);
    });
});

推荐组合 #

我个人最推荐方案1 + 方案2结合使用：客户端加随机参数确保即时生效，服务器端设置响应头从根源上杜绝缓存问题，双管齐下就不会再出现刷新看不到更新的情况了。

内容的提问来源于stack exchange，提问作者Richard de Ree