html读取json代码
时间: 2023-12-29 15:05:39 浏览: 51
可以使用JavaScript中的XMLHttpRequest对象来获取JSON数据,并使用JavaScript解析和渲染HTML页面。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>读取JSON数据</title>
<script>
function loadJSON() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
renderHTML(data);
}
};
xhttp.open("GET", "data.json", true);
xhttp.send();
}
function renderHTML(data) {
var output = "";
for (var i = 0; i < data.length; i++) {
output += "<h2>" + data[i].title + "</h2>";
output += "<p>" + data[i].content + "</p>";
}
document.getElementById("content").innerHTML = output;
}
</script>
</head>
<body onload="loadJSON()">
<div id="content"></div>
</body>
</html>
```
在这个示例中,我们使用XMLHttpRequest对象向服务器发送一个GET请求,以获取名为"data.json"的JSON数据。一旦数据被接收,我们使用JSON.parse()函数将其转换为JavaScript对象,并使用renderHTML()函数将数据呈现为HTML。最后,我们将生成的HTML插入到页面的一个id为"content"的元素中。