如何在HTML中利用 script 标签加载本地 JSON 数据结构-html教程-PHP中文网

直接用会失败，因为浏览器将json当作javascript解析，而json不是合法js语法；必须通过http服务（如live server）配合fetch()加载，或用filereader手动读取用户选择的文件。

如何在html中利用 script 标签加载本地 json 数据结构

script 标签不能直接加载本地 JSON 文件

直接用 <script src="data.json"></script> 会失败 —— 浏览器会把 JSON 当作 JavaScript 解析，而 JSON 不是合法 JS（比如键名没引号、末尾逗号等），必然报 SyntaxError: Unexpected token : 或类似错误。

这是最常踩的坑：误以为 <script></script> 是“通用资源加载器”。它只加载并执行 JS 代码，不是 <img> 或 <link>。

用 fetch() 读取本地 JSON 更可靠

现代浏览器中，fetch() 是读取本地 JSON 的标准方式，前提是文件通过 HTTP 服务提供（如 http://localhost:5500/data.json）。直接双击打开 HTML（file:// 协议）会触发 CORS 策略，导致 fetch() 失败。

实操建议：

用 VS Code 安装 Live Server 插件，右键 HTML → “Open with Live Server”，确保地址是 http:// 开头
fetch() 返回 Promise，必须用 .then() 或 async/await 处理
记得检查响应状态：if (!response.ok) throw new Error(response.status)
JSON 必须是 UTF-8 编码，BOM 会导致 Unexpected token

示例：

fetch('data.json')
  .then(r => {
    if (!r.ok) throw new Error(r.status);
    return r.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('加载失败:', err));

想绕过服务直接读本地 JSON？只能用 FileReader + input[type=file]

如果真要脱离 HTTP 服务（比如用户手动选一个 JSON 文件），唯一可行路径是让用户通过 <input type="file"> 选择文件，再用 FileReader 读取内容。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

注意点：

无法“自动读取指定路径的文件”，浏览器禁止前端脚本访问任意本地路径（安全限制）
FileReader.readAsText() 默认按 UTF-8 解码；若 JSON 含中文但保存为 GBK，会乱码
读取是异步的，需监听 load 事件，不能直接返回结果

简短示意：

<input type="file" id="jsonInput"><script>
document.getElementById('jsonInput').onchange = e => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = () => {
    try {
      const data = JSON.parse(reader.result);
      console.log('解析成功:', data);
    } catch (err) {
      console.error('JSON 格式错误:', err);
    }
  };
  reader.readAsText(file);
};
</script>