客户端原生JavaScript读取本地JSON并更新DOM的实现方法

嘿，我来帮你搞定这个需求！先把几个关键概念理清楚，再给你具体的实现步骤：

为什么不能用require()？ #

require()是Node.js专属的模块加载语法，浏览器环境根本不支持这个机制，所以咱们直接排除这个思路。

FileReader的适用场景 #

FileReader是用来处理用户主动上传的本地文件（比如通过<input type="file">选择的本地文件），而你要读取的是网站部署在服务器上的静态JSON资源，所以这个API完全不适合你的场景。咱们应该用浏览器原生的Fetch API来完成这件事。

具体实现步骤 #

结合你的目录结构：

• 脚本加载页category.html在html/目录下
• 逻辑脚本updateDomScript.js在js/目录下
• JSON文件路径为../src/data/jsonFile.json（从html/目录向上回到根目录，再进入src/data/）

1. 在category.html中正确引入脚本 #

确保HTML文件能加载到你的逻辑脚本：

<!-- html/category.html -->
<script src="../js/updateDomScript.js"></script>

2. 在updateDomScript.js中编写读取+更新DOM的代码 #

用Fetch API发起请求、解析JSON数据，再完成DOM更新：

// js/updateDomScript.js
// 发起请求获取JSON文件
fetch('../src/data/jsonFile.json')
  .then(response => {
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }
    // 解析JSON格式的响应内容
    return response.json();
  })
  .then(data => {
    // 这里拿到了解析后的JSON数据，开始更新DOM
    console.log('获取到的JSON数据:', data);
    
    // 举个实际渲染的例子：假设页面有个id为data-container的容器
    const container = document.getElementById('data-container');
    if (container) {
      // 假设你的JSON是一个对象数组，循环生成元素
      data.forEach(item => {
        const card = document.createElement('div');
        card.className = 'data-card';
        card.innerHTML = `<h3>${item.title}</h3><p>${item.description}</p>`;
        container.appendChild(card);
      });
    }
  })
  .catch(error => {
    // 处理错误情况（比如路径错误、网络问题）
    console.error('读取JSON文件出错:', error);
  });

3. 关键注意事项 #

• 必须在服务器环境下运行：直接双击打开本地HTML文件（file://协议）会触发CORS限制，Fetch请求会失败。你可以用这些方式快速搭建本地服务器：
  • Python：在项目根目录运行python -m http.server 8000（Python3），然后访问http://localhost:8000/html/category.html
  • VS Code插件：安装「Live Server」插件，右键category.html选择「Open with Live Server」
• 确认路径正确性：如果请求报404错误，检查JSON文件的相对路径是否正确——从js/updateDomScript.js出发，到jsonFile.json的路径确实是../src/data/jsonFile.json（因为js和src是同级目录）。

总结 #

Fetch API是客户端读取网站静态JSON资源的标准方案，完全匹配你的需求。只要确保路径正确、在服务器环境下运行，就能顺利读取数据并完成DOM更新啦！

内容的提问来源于stack exchange，提问作者lionrocker221