网页前端怎么加入json数据

在网页前端加入JSON数据是前端开发中常见的需求，主要通过JavaScript和Ajax技术实现，本文将详细介绍如何在网页前端加入JSON数据，并对其进行解析和展示，下面我们就一步步来看具体的操作方法。

了解JSON数据

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写，它基于JavaScript编程语言，采用键值对的方式来表示数据，JSON格式在数据传输中广泛使用，因此在网页前端加入JSON数据非常重要。

准备JSON数据

我们需要准备一份JSON数据，这里以一个简单的用户信息JSON为例：

网页前端怎么加入json数据

{
  "users": [
    {"id": 1, "name": "张三", "age": 25},
    {"id": 2, "name": "李四", "age": 30},
    {"id": 3, "name": "王五", "age": 28}
  ]
}

创建HTML文件

我们需要创建一个HTML文件，用于展示JSON数据，以下是基本的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>
    <h1>用户信息列表</h1>
    <ul id="userList"></ul>
    <script src="script.js"></script>
</body>
</html>

编写JavaScript代码

现在我们来编写JavaScript代码，用于请求JSON数据并展示在页面上。

1、创建一个JavaScript文件，命名为script.js。

网页前端怎么加入json数据

2、使用Ajax技术请求JSON数据，以下是具体的代码：

// 定义一个函数，用于请求JSON数据并展示
function loadJsonData() {
    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 配置请求方式、URL和同步/异步
    xhr.open('GET', 'data.json', true);
    // 设置请求头，指定请求类型为JSON
    xhr.setRequestHeader('Content-Type', 'application/json');
    // 监听请求完成事件
    xhr.onload = function () {
        if (xhr.status == 200) {
            // 请求成功，获取响应数据
            var jsonData = JSON.parse(xhr.responseText);
            // 调用函数，展示数据
            displayData(jsonData);
        } else {
            // 请求失败，输出错误信息
            console.log('Error loading JSON data');
        }
    };
    // 发送请求
    xhr.send();
}
// 定义一个函数，用于展示JSON数据
function displayData(jsonData) {
    // 获取ul元素
    var userList = document.getElementById('userList');
    // 遍历JSON数据中的用户信息
    jsonData.users.forEach(function (user) {
        // 创建li元素
        var li = document.createElement('li');
        // 设置li元素的内容
        li.innerHTML = 'ID：' + user.id + '，姓名：' + user.name + '，年龄：' + user.age;
        // 将li元素添加到ul中
        userList.appendChild(li);
    });
}
// 页面加载完成后，调用函数请求JSON数据
window.onload = function () {
    loadJsonData();
};