Node.js与AJAX技术问题：如何将JSON文件内容展示到HTML页面？

嘿，看来你已经搞定了JSON写入的部分，剩下的读取展示其实很简单！咱们分两步来，先给后端加个读取接口，再让前端用AJAX拿数据渲染就行～

第一步：给后端添加JSON读取接口 #

你已经引入了express、body-parser和fs，现在只需要新增一个GET接口来读取你的JSON文件（假设文件名叫data.json，放在项目根目录）。完善后的后端代码大概是这样：

var express = require("express");
var app = express();
var bodyParser = require('body-parser');
var fs = require("fs"); // 补全fs的引入

// 配置body-parser解析请求体
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 新增读取JSON数据的接口
app.get('/api/get-data', (req, res) => {
  fs.readFile('./data.json', 'utf8', (err, rawData) => {
    if (err) {
      console.error('读取JSON文件出错:', err);
      return res.status(500).send('读取数据失败');
    }
    try {
      const jsonData = JSON.parse(rawData);
      res.json(jsonData); // 把解析后的JSON对象返回给前端
    } catch (parseErr) {
      console.error('JSON格式错误:', parseErr);
      res.status(400).send('JSON文件格式不正确');
    }
  });
});

// 设置静态文件目录，让express能访问你的HTML页面
app.use(express.static('public'));

// 启动服务器，监听3000端口
app.listen(3000, () => {
  console.log('服务器跑起来啦！访问 http://localhost:3000 试试');
});

注意：把你的HTML文件放到项目根目录下的public文件夹里，这样express的静态文件中间件才能找到它哦。

第二步：前端用AJAX请求数据并渲染页面 #

假设你的HTML文件是public/index.html，先在页面里加个容器用来放JSON内容，然后写AJAX请求和渲染逻辑：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JSON内容展示</title>
  <style>
    /* 可以加一点简单的样式让页面好看点 */
    #json-container {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #eee;
      border-radius: 8px;
    }
    .data-item {
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px dashed #ddd;
    }
  </style>
</head>
<body>
  <h1 style="text-align: center;">JSON数据展示</h1>
  <div id="json-container"></div>

  <script>
    // 页面加载完成后发起请求
    window.addEventListener('load', () => {
      fetchDataAndRender();
    });

    function fetchDataAndRender() {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', '/api/get-data', true);
      xhr.onload = function() {
        if (xhr.status === 200) {
          const data = JSON.parse(xhr.responseText);
          renderDataToPage(data);
        } else {
          document.getElementById('json-container').innerHTML = '<p>😮‍💨 加载数据失败，请稍后重试</p>';
        }
      };
      xhr.onerror = function() {
        document.getElementById('json-container').innerHTML = '<p>😮‍💨 请求出错了</p>';
      };
      xhr.send();
    }

    // 把数据渲染成可读的HTML
    function renderDataToPage(data) {
      const container = document.getElementById('json-container');
      let html = '';

      if (Array.isArray(data)) {
        // 如果是数组，遍历每个对象
        data.forEach((item, index) => {
          html += `<div class="data-item">
                    <h3>第${index + 1}条数据</h3>`;
          for (const key in item) {
            html += `<p><strong>${key}:</strong> ${item[key]}</p>`;
          }
          html += '</div>';
        });
      } else {
        // 如果是单个对象，直接展示键值对
        html += '<div class="data-item">';
        for (const key in data) {
          html += `<p><strong>${key}:</strong> ${data[key]}</p>`;
        }
        html += '</div>';
      }

      container.innerHTML = html;
    }
  </script>
</body>
</html>

一些要注意的小细节 #

• 确保你的data.json是合法的JSON格式！如果是空文件，先初始化它为[]（数组）或者{}（单个对象），不然读取时会解析报错。
• 测试的时候先启动后端服务器（执行node 你的文件名.js），然后打开http://localhost:3000就能看到数据啦。
• 如果你的JSON结构比较复杂，可以调整renderDataToPage函数来适配你的数据格式，比如嵌套对象的展示。

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