在HTML页面上显示JSON数据，通常需要通过JavaScript来实现，以下是详细的步骤和技术教学：

1、引入JSON数据

你需要获取JSON数据，这可以通过多种方式实现，例如从服务器获取、从本地文件读取等，这里我们假设你已经获取到了一个名为data.json的JSON文件，其内容如下：

{
  "name": "张三",
  "age": 30,
  "hobbies": ["篮球", "足球", "游泳"]
}

2、创建HTML结构

接下来，我们需要创建一个HTML页面，用于显示JSON数据，在这个页面中，我们将使用

标签来展示JSON数据，因为它可以保留文本的格式，我们还需要引入一个外部的JavaScript文件，用于处理JSON数据。




    
    
    


    
个人信息
    

    



3、编写JavaScript代码
现在，我们需要编写一个JavaScript文件（例如main.js），用于读取JSON文件并将其内容显示在HTML页面上，为了实现这个功能，我们可以使用fetch API来获取JSON文件，然后使用JSON.parse()方法将其解析为JavaScript对象，我们可以使用innerText属性将对象的内容显示在
标签中。

// main.js
document.addEventListener('DOMContentLoaded', function () {
  fetch('data.json')
    .then(response => response.text())
    .then(data => {
      const jsonObj = JSON.parse(data);
      document.getElementById('jsonData').innerText = JSON.stringify(jsonObj, null, 2);
    })
    .catch(error => {
      console.error('加载JSON文件时出错：', error);
    });
});

4、运行示例
将上述HTML和JavaScript代码保存到同一个文件夹中，然后用浏览器打开HTML文件，你应该可以看到JSON数据被正确地显示在页面上，如果遇到任何问题，可以在浏览器的开发者工具中查看控制台输出，以获取更多关于错误的信息。
通过以上步骤，我们已经学会了如何在HTML页面上显示JSON数据，主要涉及到的技术包括：HTML、JavaScript、fetch API和JSON.parse()方法，希望这个教程对你有所帮助！