HTML5 读取本地 JSON 数据教程

一、整体流程

flowchart TD
    A[创建一个HTML文件] --> B[编写JavaScript代码读取本地JSON数据]
    B --> C[解析JSON数据并展示在网页中]

二、具体步骤

1. 创建一个HTML文件

首先，我们需要创建一个HTML文件，用于展示JSON数据。在HTML文件中添加一个<div>元素用于展示数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Read Local JSON</title>
</head>
<body>
    <div id="data"></div>
    <script src="script.js"></script>
</body>
</html>

2. 编写JavaScript代码读取本地JSON数据

接下来，我们需要编写JavaScript代码，通过AJAX请求读取本地的JSON数据。

// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 定义处理服务器响应的回调函数
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        // 在页面中展示JSON数据
        document.getElementById('data').innerHTML = JSON.stringify(data);
    }
};

// 发送AJAX请求
xhr.open('GET', 'data.json', true);
xhr.send();

在这段代码中，我们使用了XMLHttpRequest对象发送GET请求，通过JSON.parse()方法解析JSON数据，并将数据展示在页面上。

3. 解析JSON数据并展示在网页中

最后，我们需要在本地创建一个data.json文件，存储我们要展示的JSON数据。

{
    "name": "John Doe",
    "age": 30,
    "email": "johndoe@example.com"
}

在本地创建一个data.json文件，并将上述JSON数据保存其中。

总结

通过以上步骤，我们可以实现在HTML页面中读取本地的JSON数据并展示在页面上。这是一个简单的例子，你可以根据实际需求来进一步扩展和优化代码。希望这篇教程对你有所帮助，祝你编程顺利！