网页怎么读json数据

在互联网的世界里，JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，广泛应用于网页与服务器之间的数据传输，如何让网页读取JSON数据呢？我将详细为大家介绍读取JSON数据的步骤和技巧。

我们需要准备一个JSON格式的数据文件，创建一个名为data.json的文件，内容如下：

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

我们将通过以下几个步骤，让网页读取这个JSON数据。

步骤一：创建HTML文件

我们需要创建一个HTML文件，用于展示读取到的JSON数据，创建一个名为index.html的文件。

步骤二：引入JavaScript代码

在HTML文件中，我们可以通过内联或外链的方式引入JavaScript代码，这里，我们选择内联的方式，在index.html中添加以下代码：

<!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="content"></div>
    <script>
        // 这里将编写读取JSON数据的代码
    </script>
</body>
</html>

步骤三：编写JavaScript代码读取JSON数据

在<script>标签内，我们可以编写以下代码来读取JSON数据：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求类型、URL以及异步处理方式
xhr.open('GET', 'data.json', true);
// 设置响应类型
xhr.responseType = 'json';
// 设置请求完成后的回调函数
xhr.onload = function() {
    if (xhr.status === 200) {
        // 请求成功，处理JSON数据
        var data = xhr.response;
        var content = document.getElementById('content');
        // 将JSON数据转换为字符串，并展示在网页上
        content.innerHTML = JSON.stringify(data, null, 2);
    } else {
        // 请求失败，处理错误
        console.error('读取JSON数据失败：', xhr.statusText);
    }
};
// 发送请求
xhr.send();