获取JSON数据可以使用XMLHttpRequest对象或fetch API，以及jQuery库中的ajax方法。下面分别给出几个示例说明。
1. 使用XMLHttpRequest对象获取JSON数据并渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用XMLHttpRequest对象获取JSON数据并渲染</title>
</head>
<body>
<h2>使用XMLHttpRequest对象获取JSON数据并渲染</h2>
<ul id="list"></ul>
<script>
// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('GET', 'data.json', true);
// 响应事件处理函数
xhr.onreadystatechange = function() {
// 判断响应是否完成
if (xhr.readyState === 4 && xhr.status === 200) {
// 将响应数据解析为JSON对象
var data = JSON.parse(xhr.responseText);
// 渲染数据到页面上
var listEl = document.querySelector('#list');
for (var i = 0; i < data.length; i++) {
var itemEl = document.createElement('li');
itemEl.innerText = data[i].name + ' - ' + data[i].age;
listEl.appendChild(itemEl);
}
}
}
// 发送请求
xhr.send();
</script>
</body>
</html>
2. 使用fetch API获取JSON数据并渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用fetch API获取JSON数据并渲染</title>
</head>
<body>
<h2>使用fetch API获取JSON数据并渲染</h2>
<ul id="list"></ul>
<script>
fetch('data.json')
.then(response => response.json()) // 将响应数据解析为JSON对象
.then(data => {
// 渲染数据到页面上
var listEl = document.querySelector('#list');
for (var i = 0; i < data.length; i++) {
var itemEl = document.createElement('li');
itemEl.innerText = data[i].name + ' - ' + data[i].age;
listEl.appendChild(itemEl);
}
})
.catch(error => console.error(error)); // 处理请求失败情况
</script>
</body>
</html>
在以上两种方法中，我们都先创建了一个用于请求数据的XMLHttpRequest对象或使用fetch API发送请求，然后通过设置onreadystatechange事件或使用Promise来处理数据的响应。最后，我们将获取到的JSON数据解析成对象，并使用DOM操作将数据渲染到页面上。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：html中通过JS获取JSON数据并加载的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 