html读取json格式文件并显示
时间: 2023-08-18 22:07:06 浏览: 52
要在HTML中读取JSON格式文件并将其显示,可以使用JavaScript的`XMLHttpRequest`对象或者AJAX来读取文件并将其解析为JSON对象,然后将数据呈现在HTML页面上。
以下是一个简单的例子:
HTML文件:
```
<!DOCTYPE html>
<html>
<head>
<title>读取JSON文件并显示</title>
</head>
<body>
<h1>读取JSON文件并显示</h1>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript文件(例如`script.js`):
```
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var output = "<ul>";
data.forEach(function(item) {
output += "<li>" + item.name + "</li>";
});
output += "</ul>";
document.getElementById("output").innerHTML = output;
}
}
xhr.open("GET", "data.json", true);
xhr.send();
```
在这个例子中,我们创建了一个`XMLHttpRequest`对象,并在其`onreadystatechange`事件处理程序中检查请求状态。如果状态为`4`(请求已完成)并且状态码为`200`(请求成功),则解析响应文本并将其呈现为一个无序列表。最后,我们将结果放入页面中的一个`div`元素中。请注意,在此示例中,JSON文件`data.json`必须与HTML文件在同一目录中。