index.html如何引用JSON文件？-html教程-PHP中文网

不能直接用引入json文件，因为浏览器将其当作javascript执行，而json不符合js语法（如键名无引号、末尾逗号等），导致syntaxerror；必须用fetch或xmlhttprequest等http请求方式加载并显式调用.json()解析。

index.html如何引用json文件？

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

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

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

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

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

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

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

OpenGemini Next.js Bestpractice Builder

使用固定的 Next.js/Tailwind/Prisma 技术栈构建并记录独立 SaaS 项目，仅将 FastAPI 用于 Python 工作负载，并遵循严格的架构规范。

下载

示例（放在 <script></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