为了将JSON数据传递给页面，主要方法包括AJAX请求、在HTML中嵌入JSON数据、通过URL参数传递JSON数据。最常见的方法是通过AJAX请求传递数据，因为它可以实现异步数据加载，提升用户体验。接下来，我们将详细描述如何通过AJAX请求把JSON数据传递给页面，并提供几个实用的代码示例。
一、AJAX请求传递JSON数据
AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，从服务器请求数据的方法。通过AJAX，可以实现异步数据加载，从而提升用户体验。
1、使用XMLHttpRequest对象
XMLHttpRequest对象是最早的AJAX实现之一，虽然现在较多使用fetch API，但了解其工作原理仍然非常重要。
// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求类型、URL和是否异步
xhr.open("GET", "https://api.example.com/data", true);
// 监听请求完成事件
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 解析JSON数据
var jsonData = JSON.parse(xhr.responseText);
// 将数据传递给页面
document.getElementById("data-container").innerText = JSON.stringify(jsonData, null, 2);
}
};
// 发送请求
xhr.send();
2、使用fetch API
fetch API是现代浏览器中推荐使用的AJAX实现方法，它比XMLHttpRequest更简洁和易用。
// 使用fetch API请求数据
fetch("https://api.example.com/data")
.then(response => response.json())
.then(jsonData => {
// 将数据传递给页面
document.getElementById("data-container").innerText = JSON.stringify(jsonData, null, 2);
})
.catch(error => console.error('Error:', error));
二、在HTML中嵌入JSON数据
在某些情况下，你可能需要在HTML中嵌入JSON数据，例如在页面加载时将数据直接传递给JavaScript。