Ajax请求被缓存怎么办？这几个方法轻松解决

{"title":"Ajax请求被缓存怎么办？这几个方法轻松解决","content":"

在开发网页应用时，经常会用到 Ajax 请求从服务器获取数据。但有时候你会发现，明明数据已经更新了，页面上的内容却还是旧的。刷新一下可能又好了，但这显然不是用户想要的体验。问题很可能出在浏览器对 Ajax 请求的缓存上。

\n\n

为什么Ajax请求会被缓存？

\n

很多人以为只有页面或图片才会被缓存，其实浏览器对 GET 类型的 Ajax 请求也会自动缓存，尤其是当 URL 完全相同时。比如你调用 /api/userinfo 获取用户信息，第二次请求时浏览器可能直接从缓存中拿结果，根本不会发到服务器。

\n\n

如何避免Ajax请求被缓存？

\n

最简单有效的方法是在请求的 URL 后面加一个时间戳参数，让每次请求的地址看起来都不一样。

\n\n

$.ajax({\n  url: \'/api/userinfo?t=\' + new Date().getTime(),\n  type: \'GET\',\n  success: function(data) {\n    console.log(data);\n  }\n});

\n\n

这样每次生成的 URL 都带有一个唯一的 t 参数，浏览器就会当作新请求处理，自然就不会读缓存了。

\n\n

如果你用的是原生 JavaScript 的 fetch，也可以这么写：

\n\n

fetch(\'/api/userinfo?t=\' + Date.now())\n  .then(response => response.json())\n  .then(data => console.log(data));

\n\n

设置请求头禁止缓存

\n

除了改 URL，还可以通过设置请求头告诉浏览器不要缓存。在发送请求时加上 Cache-Control 和 Pragma 头：

\n\n

$.ajax({\n  url: \'/api/userinfo\',\n  type: \'GET\',\n  beforeSend: function(xhr) {\n    xhr.setRequestHeader(\'Cache-Control\', \'no-cache\');\n    xhr.setRequestHeader(\'Pragma\', \'no-cache\');\n  },\n  success: function(data) {\n    console.log(data);\n  }\n});

\n\n

这种方法适合不想改动 URL 的场景，但要注意某些代理服务器或中间层可能对头部支持不完全。

\n\n

jQuery 用户的快捷方式

\n

如果你项目里用了 jQuery，可以直接设置全局关闭缓存：

\n\n

$.ajaxSetup({\n  cache: false\n});

\n\n

这一行代码会让所有后续的 Ajax 请求自动添加一个时间戳参数，省得每个请求都手动处理。

\n\n

后端也可以控制缓存

\n

除了前端想办法，后端接口也可以在响应头中加入以下字段：

\n\n

Cache-Control: no-cache, no-store, must-revalidate\nPragma: no-cache\nExpires: 0

\n\n

这样无论前端怎么发请求，服务器都会强制要求浏览器不使用缓存。前后端配合效果更稳。

\n\n

举个实际例子：你做一个后台管理系统，首页显示“今日订单数”。如果这个数字被缓存了，管理员看到的就是昨天的数据，那可就麻烦了。加上时间戳或者禁用缓存后，每次打开页面都能拿到最新值，避免误判。

","seo_title":"Ajax请求被缓存怎么办？多种解决方案详解","seo_description":"Ajax请求被浏览器缓存导致数据不更新？本文提供添加时间戳、设置请求头、jQuery配置等多种实用方法，帮你彻底解决Ajax缓存问题。","keywords":"ajax请求被缓存,ajax缓存问题,禁止ajax缓存,ajax缓存解决方案,浏览器缓存"}