求助：如何从test.json获取单个数据并展示到index.html？

别慌！这个需求其实超简单，我拆成几步给你讲，保证一看就懂：

第一步：先明确你的test.json结构 #

假设你的test.json内容是类似这样的（你可以对应自己的实际数据调整）：

{
  "targetValue": "这是你要提取的单个值"
}

第二步：准备好HTML里的展示容器 #

你想到用<p id="jsondata"></p>来放数据完全没问题，把它放在index.html合适的位置就行，比如：

<!DOCTYPE html>
<html>
<head>
    <title>显示JSON数据</title>
</head>
<body>
    <h1>我的JSON数据展示</h1>
    <!-- 这就是你用来放数据的容器 -->
    <p id="jsondata"></p>

    <!-- 把JS代码写在这里，或者单独写个JS文件引入也可以 -->
    <script>
        // 第三步的JS代码写在这里
    </script>
</body>
</html>

第三步：用JavaScript获取并渲染数据 #

我们用浏览器原生的fetch API来读取JSON文件，然后把目标值放到指定的DOM元素里，把下面的代码放到上面的<script>标签里：

// 1. 获取用来展示数据的DOM元素
const dataElement = document.getElementById('jsondata');

// 2. 读取test.json文件
fetch('test.json')
  .then(response => {
    // 先检查请求是否成功，失败就抛出错误
    if (!response.ok) {
      throw new Error('无法加载JSON文件');
    }
    // 把响应转换成JSON格式的对象
    return response.json();
  })
  .then(data => {
    // 3. 从JSON数据里提取你需要的单个值，这里要换成你实际的字段名
    const singleValue = data.targetValue;
    // 4. 把值放到DOM元素里显示出来
    dataElement.textContent = singleValue;
  })
  .catch(error => {
    // 如果出错了，在页面上显示错误提示
    dataElement.textContent = `加载失败：${error.message}`;
  });

关键细节提醒 #

• 要确保test.json和index.html放在同一个文件夹里，不然得写正确的文件路径（比如./data/test.json）。
• data.targetValue里的targetValue要换成你JSON文件里实际的字段名，比如你的JSON是{"userName": "Austin"}，那这里就写data.userName。
• textContent是用来设置元素文本内容的，比innerHTML更安全，适合显示纯文本数据。

这样操作完，打开index.html就能看到JSON里的单个值显示在页面上啦！

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