index.html如何引用JSON文件

作者：袖梨 2026-07-23

不能直接用<script src="data.json">引入JSON文件，因为浏览器将其当作JavaScript执行，而JSON不符合JS语法（如键名无引号、末尾逗号等），导致SyntaxError；必须用fetch或XMLHttpRequest等HTTP请求方式加载并显式调用.json()解析。

不能直接用 <script src="data.json"></script> 引入 JSON 文件——浏览器会把它当 JavaScript 执行，立刻报 SyntaxError: Unexpected token。

为什么 `<script src="xxx.json">` 会报错

JSON 不是合法的 JavaScript 表达式（比如键名没引号、末尾多逗号），<script> 标签只认 JS 语法。即使内容看起来“像数据”，浏览器也强制解析为代码，失败就中断。

常见错误现象：Uncaught SyntaxError: Unexpected token ':' 或 Unexpected end of JSON input。

JSON 文件必须通过 HTTP 请求加载（如 fetch），再手动解析
不能靠 HTML 标签“自动注入”到全局变量里（除非你手写一个 JS wrapper）
本地文件协议（file://）下 fetch 会因 CORS 被拒，开发时得用本地服务器

推荐做法：用 `fetch` 加载并解析

这是现代浏览器最直接、可控的方式。注意必须在页面 DOM 加载完成后执行，否则可能操作不到目标元素。

立即学习“前端免费学习笔记（深入）”；

示例（放在 <script> 标签里，或外部 JS 中）：

fetch('data.json')  .then(r => {    if (!r.ok) throw new Error(`HTTP ${r.status}`);    return r.json();  })  .then(data => {    console.log(data); // ✅ 正确拿到解析后的对象    // 在这里更新页面内容，比如填充列表  })  .catch(err => console.error('加载失败:', err));

fetch 返回的是 Promise，别忘了用 .json() 显式解析（不是自动的）
务必检查 r.ok，404 或 500 不会进 catch，但 .json() 会失败
JSON 文件路径是相对 HTML 的，不是相对于 JS 文件——这点容易搞混

兼容旧浏览器？用 `XMLHttpRequest` 替代

IE11 及更老环境不支持 fetch，可用传统方式，但逻辑更冗长：

const xhr = new XMLHttpRequest();xhr.open('GET', 'data.json');xhr.responseType = 'json';xhr.onload = function() {  if (xhr.status >= 200 && xhr.status < 300) {    console.log(xhr.response); // ✅ 已解析  } else {    console.error('请求失败:', xhr.statusText);  }};xhr.send();