在index.html中集成JSON数据：HTML异步请求与渲染-html教程-PHP中文网

能，但只适合极小量静态数据；大量或动态数据应通过fetch异步加载，避免硬编码维护噩梦，并注意xss防护、cors处理及加载体验优化。

在index.html中集成json数据：html异步请求与渲染

JSON数据直接内嵌在HTML里行不行？

能，但只适合极小量静态数据（比如配置开关、默认文案）。JSON.parse() 读取 <script type="application/json"></script> 里的内容确实简单，可一旦数据超过几KB，或需要按需加载、刷新、分页，硬编码就变成维护噩梦——改个字段得重新构建 HTML，缓存失效、CDN 更新延迟全得手动扛。

真正该走异步请求的场景：用户列表、文章摘要、表单选项等动态内容。别图省事往 <script></script> 里塞几百行 JSON。

fetch() 加载 JSON 后怎么安全渲染到页面？

拿到 response.json() 结果后，别直接用 innerHTML = dataHtmlString 拼接——XSS 风险高，且容易把用户输入的 <script></script> 或 onerror 属性执行掉。优先用 DOM API 逐个创建元素：

const listEl = document.getElementById('user-list');
data.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name; // 自动转义
  listEl.appendChild(li);
});

如果必须插 HTML 片段（比如富文本简介），用 DOMPurify.sanitize() 过滤，而不是靠正则或白名单字符串替换。

常见坑：fetch() 默认不带 credentials，跨域请求带 Cookie 会失败；后端返回非 200-299 状态码时，response.ok 是 false，但 Promise 不 reject，得手动检查。