html怎么调用json数据

在HTML中调用JSON数据是前端开发中常见的需求，通过这种方式可以实现数据的动态加载和交互，我将详细介绍如何在HTML中调用JSON数据。

html怎么调用json数据

我们需要准备一个JSON格式的数据文件，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，以下是一个简单的JSON数据示例：

{
  "name": "张三",
  "age": 25,
  "city": "北京"
}

将这段JSON数据保存为一个.json文件，例如data.json。

我们分步骤来讲解如何在HTML中调用这个JSON数据：

步骤一：创建HTML文件

创建一个HTML文件，例如index.html，在这个文件中，我们需要编写基本的HTML结构，并在其中引入一个<script>标签，用于编写JavaScript代码。

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调用JSON数据示例</title>
</head>
<body>
    <div id="info"></div>
    <script src="script.js"></script>
</body>
</html>

步骤二：编写JavaScript代码

在HTML文件同目录下创建一个名为script.js的JavaScript文件，在这个文件中，我们将使用JavaScript的fetch API来请求JSON数据，并将其显示在HTML页面上。

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    fetch('data.json')
        .then(response => response.json())
        .then(data => {
            // 处理获取到的JSON数据
            const infoDiv = document.getElementById('info');
            infoDiv.innerHTML =<p>姓名：${data.name}</p><p>年龄：${data.age}</p><p>城市：${data.city}</p>;
        })
        .catch(error => {
            console.error('Error:', error);
        });
});