html怎么获取json

在HTML中获取JSON数据是前端开发中常见的需求，主要是为了从服务器获取数据并在网页上展示，下面将详细介绍如何使用HTML获取JSON数据，主要包括JavaScript的使用、Ajax技术的应用以及如何处理JSON数据。

了解JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，它基于JavaScript编程语言的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

使用JavaScript获取JSON数据

在HTML中，我们通常使用JavaScript来获取JSON数据，以下是一步一步的操作方法：

1、创建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数据示例</title>
</head>
<body>
    <div id="data-container"></div>
    <script src="script.js"></script>
</body>
</html>

2、编写JavaScript代码

html怎么获取json

我们需要编写JavaScript代码来获取JSON数据，创建一个名为script.js的JavaScript文件。

// JavaScript代码
document.addEventListener('DOMContentLoaded', function() {
    fetchData();
});
function fetchData() {
    // 使用XMLHttpRequest对象发送请求
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'data.json', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 请求成功，解析JSON数据
            var jsonData = JSON.parse(xhr.responseText);
            // 调用函数展示数据
            displayData(jsonData);
        }
    };
    xhr.send();
}
function displayData(data) {
    // 获取HTML元素
    var container = document.getElementById('data-container');
    // 清空容器内容
    container.innerHTML = '';
    // 遍历JSON数据，创建元素并添加到页面
    data.forEach(function(item) {
        var div = document.createElement('div');
        div.innerHTML = 'Name: ' + item.name + ', Age: ' + item.age;
        container.appendChild(div);
    });
}

3、准备JSON数据

创建一个名为data.json的JSON文件，用于存储测试数据。

[
    {"name": "Alice", "age": 25},
    {"name": "Bob", "age": 30},
    {"name": "Charlie", "age": 35}
]

4、运行示例

将index.html、script.js和data.json放在同一个目录下，使用浏览器打开index.html文件，即可看到从JSON文件中获取的数据展示在页面上。

使用Ajax技术获取远程JSON数据

html怎么获取json

在实际开发中，我们通常需要从远程服务器获取JSON数据，这时，可以使用Ajax技术。

1、修改JavaScript代码

将fetchData函数中的请求地址改为远程服务器的URL。

function fetchData() {
    // 使用XMLHttpRequest对象发送请求
    var xhr = new XMLHttpRequest();
    // 注意：这里替换为远程服务器的URL
    xhr.open('GET', 'https://example.com/data.json', true);
    // 以下代码保持不变
    // ……
}

2、服务器端设置

确保服务器端已经设置了正确的CORS（跨源资源共享）策略，允许您的HTML页面跨域请求JSON数据。