index.html如何引用JSON文件

不能直接用<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();

• xhr.responseType = 'json' 是关键，否则 xhr.responseText 是字符串，还得手动 JSON.parse()
• 别漏掉 xhr.onerror，网络断开时不会触发 onload
• 如果必须支持 IE9，就得用 JSON.parse(xhr.responseText) + try/catch

真正容易被忽略的是开发阶段的协议限制：直接双击打开 index.html，fetch 会因跨域被拦，连控制台都看不到具体错误。要么起个 python3 -m http.server，要么配个轻量本地服务——这步跳过，90% 的人卡在“明明文件在，就是读不到”。