如何防止 AJAX 请求缓存导致动态内容无法实时更新

原因其实很清晰：浏览器（以及部分服务器，比如 Flask 的默认开发服务器）会对相同 URL 的 GET 请求启用缓存。当 $('#main').load('new-content.php #main') 被反复调用时，请求的 URL 始终不变，浏览器可能直接返回缓存里的响应，压根不去发起真正的网络请求。哪怕 Flask 没有显式配置缓存，它的开发服务器默认也可能对静态响应做轻量缓存，这会让问题更明显。

✅ 推荐解决方案：添加时间戳参数（Cache Buster）
最直接的办法就是为每次请求生成一个唯一的查询参数（比如毫秒级时间戳），强制 URL 变化，从而绕过缓存：

function updateMain() {
  setTimeout(function() {
    console.log("updating");
    const cacheBuster = new Date().getTime();
    // 关键：将时间戳作为查询参数附加到 URL 后
    $('#main').load(`new-content.php?cb=${cacheBuster} #main`, function() {
      updateMain(); // 递归调用下一轮
    });
  }, 3000);
}
updateMain();

⚠️ 注意事项：

• URL 拼接顺序：一定要确保 ?cb=... 出现在片段选择器 #main 之前，也就是写成 new-content.php?cb=123 #main。如果顺序反了，jQuery 会把它当成无效 URL 解析。
• 服务端兼容性：这个参数纯粹是为了打破缓存，new-content.php 完全不需要处理它（忽略即可）。但需要确认 PHP 脚本本身没有输出 Cache-Control: public 或者长时效的 Expires 头，否则时间戳也救不了你。
• 更健壮的替代方案（进阶玩法）：如果你想彻底禁用客户端缓存，可以在 AJAX 配置里全局设置：

  $.ajaxSetup({
    cache: false // 自动为所有 jQuery AJAX 请求添加时间戳参数
  });

  这样之后，$('#main').load('new-content.php #main') 就不用手动加参数了。但要注意，这个设置会影响所有 AJAX 请求，得权衡一下。

总结一下：缓存是提升性能的好东西，但在实时数据场景下，你必须主动管理它。使用时间戳缓存粉碎（cache busting）是最简单、跨浏览器兼容性最好的做法。配合服务端响应头优化（比如设置 Cache-Control: no-cache），就能让仪表盘的内容做到毫秒级同步更新，不再被旧数据“卡脖子”。