怎么通过JSON访问到自己的html

在Web开发过程中，我们经常需要通过JSON（JavaScript Object Notation）与HTML进行交互，JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，本文将详细介绍如何通过JSON访问到自己的HTML，帮助大家更好地掌握这一技能。

准备工作

在开始之前，我们需要准备以下材料：

1、一个HTML文件：用于展示数据。

2、一个JSON文件：存储需要展示的数据。

3、JavaScript代码：用于读取JSON文件，并将数据填充到HTML中。

创建HTML文件

我们创建一个简单的HTML文件，创建一个名为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访问HTML示例</title>
</head>
<body>
    <div id="data-container">
        <!-- 这里将通过JavaScript插入数据 -->
    </div>
</body>
</html>

创建JSON文件

我们创建一个JSON文件，命名为data.json，在这个文件中，我们存储一些简单的数据，如下：

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

编写JavaScript代码

我们需要编写JavaScript代码来读取JSON文件，并将数据填充到HTML中，以下是详细步骤：

1、在index.html中引入jQuery库（为了简化操作，这里使用jQuery），在<head>标签中添加以下代码：

怎么通过JSON访问到自己的html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2、在<body>标签的最后，添加以下JavaScript代码：

<script>
    $(document).ready(function() {
        // 读取JSON文件
        $.getJSON('data.json', function(data) {
            // 遍历JSON数据
            $.each(data, function(key, value) {
                // 创建一个p标签，并将数据填充进去
                var p = $('<p></p>').text(key + ': ' + value);
                // 将p标签添加到data-container中
                $('#data-container').append(p);
            });
        });
    });
</script>