在 HTML 中,你可以使用 JavaScript 来获取和处理 JSON 数据。下面是一个示例:
<!DOCTYPE html>
<html>
<head>
<title>获取和展示 JSON 数据</title>
</head>
<body>
<div id="dataContainer"></div>
<script>
// 使用 XMLHttpRequest 对象发送异步请求
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.json', true); // JSON 数据的 URL
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
displayData(data);
}
else {
console.error('请求失败:', xhr.status);
}
};
xhr.send();
function displayData(data) {
// 在页面上展示数据
var html = '';
for (var i = 0; i < data.length; i++) {
html += '<p>' + data[i].name + ': ' + data[i].value + '</p>';
}
document.getElementById('dataContainer').innerHTML = html;
}
</script>
</body>
</html>
在上面给出的示例中,我们通过创建一个 `XMLHttpRequest` 对象来发送异步请求获取 JSON 数据。通过调用 `open()` 方法指定请求类型为 `'GET'`,并将 JSON 数据的 URL 作为参数。然后,我们定义一个 `onload` 事件处理程序,在成功获取响应时执行。
在 `onload` 事件处理程序中,我们首先检查响应的状态码是否为 200,表示请求成功。如果成功,我们使用 `JSON.parse()` 方法将响应文本解析为 JSON 对象,并调用 `displayData()` 函数来展示数据。
在 `displayData()` 函数中,我们使用一个简单的循环来构建 HTML 字符串,并将数据展示在具有 id 为 `'dataContainer'` 的 `<div>` 元素中。请确保在页面中存在这个元素以显示数据。
这是一个基本的示例,你可以根据实际需求和数据结构,对 JavaScript 代码进行修改和扩展,以适应你的情况。
另外,需要注意的是,上面给出的示例中使用的是原生的 XMLHttpRequest 对象。你也可以使用 jQuery 或其他 JavaScript 库来简化 AJAX 请求操作和处理 JSON 数据。