浏览器原生支持 fetch() 加载同源 json 文件，需确保服务端返回 content-type: application/json 且通过 http/https 协议访问；本地 file:// 协议会失败。
直接用 fetch() 读取 JSON 文件并渲染到页面
浏览器原生支持通过 fetch() 加载同源 JSON 文件，不需要额外库。关键在于：JSON 必须是静态文件（如 data.json），且服务端需返回 Content-Type: application/json（本地双击打开 file:// 协议会失败，必须走 http:// 或 https://）。
常见错误现象：Failed to fetch、CORS error、或控制台显示 “Unexpected token
- 确保服务器运行中：用
npx serve、python3 -m http.server或 VS Code Live Server 插件启动本地服务 - JSON 文件不能有 BOM 头，保存为 UTF-8 无 BOM 格式
-
fetch()后必须链式调用.json()，不能直接用response.text()再JSON.parse() - 渲染前检查 DOM 元素是否存在，避免
Cannot set property 'innerHTML' of null
fetch('data.json')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => {
const container = document.getElementById('json-output');
if (container) container.innerHTML = `<pre class="brush:php;toolbar:false;">${JSON.stringify(data, null, 2)}`;
})
.catch(err => console.error('加载 JSON 失败:', err));
在 HTML 中内联小量 JSON 数据（不发请求）
适合配置类数据（如站点标题、开关状态），避免额外 HTTP 请求。核心是把 JSON 字符串写进 <script></script> 标签，并用 type="application/json" 声明，这样浏览器不会执行它，但 JS 可安全读取。
容易踩的坑：type="text/javascript" 会导致 JS 引擎尝试执行 JSON 报错；没转义 HTML 特殊字符（如 "、）会导致解析失败。
- JSON 必须是合法字符串，所有双引号需保留，不能用单引号包裹整个 JSON
- 如果 JSON 值含 HTML 内容（如
"content": "<p>Hello</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>"），渲染时要用element.innerHTML，但要确认来源可信，否则有 XSS 风险 - 推荐用
JSON.stringify()生成内联 JSON，而非手写——尤其含中文或嵌套结构时
<script type="application/json" id="config">
{"title": "我的仪表盘", "theme": "dark", "items": ["首页", "日志"]}</script><script>
const configEl = document.getElementById('config');
const config = JSON.parse(configEl.textContent);
document.title = config.title;
</script>
处理 JSON 数组并动态生成列表（常见于菜单/卡片）
多数真实场景不是展示原始 JSON，而是提取字段生成 DOM。重点在遍历方式和模板拼接逻辑，而不是 JSON.stringify() 一整坨输出。
性能影响：大量数据（>100 条）直接拼接字符串再赋值给 innerHTML 可能卡顿；IE 不支持 Array.prototype.map() 等现代方法。
- 优先用
document.createElement()+appendChild()替代字符串拼接，更安全且利于后续事件绑定 - 若用字符串模板，记得对用户输入字段做 HTML 转义（如用
textContent设置文本，或手动替换&、、<code>"） - 避免在循环里反复查询 DOM（如每次
document.getElementById()），应提前缓存父容器
// data.json 示例：[{"id":1,"name":"项目A"},{"id":2,"name":"项目B"}]
fetch('data.json')
.then(r => r.json())
.then(list => {
const ul = document.getElementById('item-list');
list.forEach(item => {
const li = document.createElement('li');
li.textContent = item.name; // 自动转义，无 XSS
ul.appendChild(li);
});
});
调试 JSON 显示问题的三个必查点
90% 的“JSON 不显示”问题出在这三处，按顺序排查比重写代码更快。
- 打开浏览器开发者工具 → Network 标签页，看
data.json请求是否 200？响应内容是不是纯 JSON（开头不是/code>）？ - 在 Console 里手动运行
fetch('data.json').then(r => r.json()).then(console.log)，确认解析是否成功 - 检查目标 DOM 元素 ID 是否拼写一致，且脚本执行时机是否早于元素创建（把
<script></script>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
