如何将获取的 JSON 数据显示在网页上
可以使用 JavaScript 将获取到的 JSON 值显示在网页上。具体步骤如下:
-
获取 JSON 值,可以使用 XMLHttpRequest 对象或 jQuery 的 ajax 方法等。
-
将获取到的 JSON 字符串转换为 JavaScript 对象,可以使用 JSON.parse() 方法。
-
通过 JavaScript 操作 DOM,将获取到的 JSON 值动态地添加到网页上。例如,可以创建一个 div 元素,然后将 JSON 值作为文本节点添加到该 div 元素中,最后将该 div 元素添加到网页的指定位置。
示例代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Display JSON on Webpage</title>
</head>
<body>
<div id='json-container'></div>
<script>
// 获取 JSON 值
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.json', true);
xhr.onload = function() {
// 将获取到的 JSON 字符串转换为 JavaScript 对象
var data = JSON.parse(this.responseText);
// 创建一个 div 元素,并将 JSON 值作为文本节点添加到该元素中
var jsonDiv = document.createElement('div');
jsonDiv.textContent = JSON.stringify(data);
// 将该 div 元素添加到网页的指定位置
document.getElementById('json-container').appendChild(jsonDiv);
};
xhr.send();
</script>
</body>
</html>
上述代码会将获取到的 JSON 值以字符串形式显示在网页上,如果需要以更美观的方式显示 JSON 值,可以使用第三方库,例如 pretty-print-json。
原文地址: https://www.cveoy.top/t/topic/nKpy 著作权归作者所有。请勿转载和采集!