如何在 HTML 页面中正确加载并显示 JSON 数据

本文详解如何通过原生 javascript 的 `fetch()` api 安全、兼容地加载本地 json 文件，并将其动态渲染到 html 页面中，解决模块导入 json 时因 mime 类型限制导致的报错问题。

在现代浏览器中，直接通过 import 语句导入 .json 文件（如 import demo from ‘./data.json’）仅在启用 JSON 模块支持（且服务端配置正确 MIME 类型）的 ES 模块环境中才可行。而多数本地开发场景（尤其是使用文件协议 file:// 或简易 http 服务时），服务器默认不将 .json 文件响应为 application/json MIME 类型，或浏览器对

Failed to load module script: Expected a javaScript module script but the server responded with a MIME type of "application/json".

✅ 正确做法是：使用 fetch() 发起 HTTP 请求获取 JSON 数据——这是标准、跨浏览器、无需额外构建工具的推荐方案。

✅ 推荐实现（原生 javascript，无依赖）

修改你的 script.js（注意：不再使用 type=”module” 导入 JSON，而是用 fetch 异步加载）：

// js/script.js document.addEventListener('DOMContentLoaded', () => {   fetch('./data.json')     .then(response => {       if (!response.ok) {         throw new Error(`HTTP error! status: ${response.status}`);       }       return response.json();     })     .then(data => {       // ✅ 成功解析 JSON，可安全渲染       const demoEl = document.getElementById('demo');       // 示例：以预格式化方式显示（保留缩进与结构）       demoEl.innerhtml = '
' + JSON.stringify(data, null, 2) + '
';        // 或按需渲染为列表、表格等（见下方扩展）       // createList(data);     })     .catch(error => {       console.error('加载 JSON 失败:', error);       document.getElementById('demo').textContent = '数据加载失败，请检查 data.json 路径及格式。';     }); });
同时，将 index.html 中的脚本引入改为普通脚本（移除 type="module"，避免模块上下文限制）：
立即学习“前端免费学习笔记（深入）”；
   
加载中...
    
⚠️ 注意事项：确保 data.json 文件路径正确（与 script.js 同级？则 ./data.json 正确；若在 js/ 目录下，则应为 ./data.json 或 ../data.json，依实际目录结构调整）；JSON 文件必须是严格语法正确的（双引号键名、无尾逗号、UTF-8 编码）；不能直接用 file:// 协议打开 HTML（chrome/firefox 会拦截 fetch 跨源请求）→ 请使用本地服务器，例如：VS Code 安装 Live Server 插件一键启动；终端运行 npx serve 或 python3 -m http.server 8000。
? 扩展：将 JSON 渲染为 HTML 列表（示例）
假设 data.json 内容如下：
[   {"name": "Alice", "age": 30},   {"name": "Bob", "age": 25} ]
可在 then(data => { ... }) 中添加：
function createList(items) {   const list = document.createElement('ul');   items.forEach(item => {     const li = document.createElement('li');     li.textContent = `${item.name} (${item.age}岁)`;     list.appendChild(li);   });   document.getElementById('demo').innerHTML = '';   document.getElementById('demo').appendChild(list); } // 调用：createList(data);
✅ 总结

❌ 避免在  
✅ 使用 fetch('./data.json').then(r => r.json()) 是标准、可靠、零依赖的方案；
✅ 始终包裹在 domContentLoaded 或 window.onload 中，确保 DOM 就绪；
✅ 添加错误处理与用户提示，提升健壮性；
✅ 开发时务必通过本地 HTTP 服务器访问，而非双击打开 HTML 文件。

遵循以上方法，即可稳定、清晰地将 JSON 数据动态展示在网页中。