HTML加载json数据,举例!
时间: 2023-05-26 21:01:46 浏览: 218
假设有一份名为data.json的文件,内容如下:
```
{
"employees": [
{
"firstName": "John",
"lastName": "Doe",
"age": 25,
"gender": "male",
"department": "IT"
},
{
"firstName": "Jane",
"lastName": "Doe",
"age": 30,
"gender": "female",
"department": "HR"
},
{
"firstName": "Bob",
"lastName": "Smith",
"age": 45,
"gender": "male",
"department": "Marketing"
}
]
}
```
我们可以使用JavaScript的XMLHttpRequest对象来获取这份json数据,并将其展示在HTML页面中。具体实现如下:
```
<!DOCTYPE html>
<html>
<head>
<title>Load data from JSON file</title>
</head>
<body>
<div id="employees"></div>
<script>
var xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象
xhr.onreadystatechange = function() { //定义请求状态变化的回调函数
if (this.readyState == 4 && this.status == 200) { //如果请求成功
var data = JSON.parse(xhr.responseText); //解析json数据
var employees = data.employees; //获取员工信息数据
var html = "";
for(var i=0; i<employees.length; i++) { //循环生成HTML代码
html += "<p>姓名:" + employees[i].firstName + " " + employees[i].lastName + "</p>";
html += "<p>年龄:" + employees[i].age + "</p>";
html += "<p>性别:" + employees[i].gender + "</p>";
html += "<p>部门:" + employees[i].department + "</p><hr>";
}
document.getElementById("employees").innerHTML = html; //将HTML代码插入页面中
}
};
xhr.open("GET", "data.json", true); //打开请求
xhr.send(); //发送请求
</script>
</body>
</html>
```
这段代码通过XMLHttpRequest对象获取data.json文件中的json数据,并解析为JavaScript对象。然后根据员工信息数据动态生成HTML代码,最后将HTML代码插入页面中展示。