JSON（JavaScript Object Notation）是一種輕量級的數據交換格式。它已經成為了現代Web應用程序中傳遞數據的標準格式。在Web前端開發中，我們經常需要將后端返回的JSON數據渲染到頁面上展示給用戶。下面將介紹如何使用JavaScript將JSON數據傳遞給HTML頁面。

首先，在HTML頁面中我們需要創建一個用于顯示JSON數據的元素，通常使用

標簽來實現。</p>
<pre>
<pre id="json-data"></pre>

在JavaScript中，我們使用XMLHttpRequest（XHR）對象向后端發送數據請求，之后通過callback函數處理后端返回的JSON數據并且渲染在HTML頁面上。

// 創建XHR對象
const xhr = new XMLHttpRequest();
// 設置請求方法和URL地址
xhr.open('GET', '/api/data', true);
// 發送請求
xhr.send();
// 處理后端返回的JSON數據并且渲染在HTML頁面上
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const jsonData = JSON.parse(xhr.responseText);
document.querySelector('#json-data').textContent = JSON.stringify(jsonData, null, 2);
}
};

代碼執行的過程大概如下：

1. 創建一個新的XHR對象。

2. 使用xhr.open()方法設定請求的方法和URL地址。

3. 調用xhr.send()方法發送請求。

4. 監聽XHR狀態以處理后端返回的數據。

5. 如果XHR的狀態為4（請求完成），狀態碼為200（成功），則將后端返回的JSON數據渲染在HTML頁面上。

這樣，我們就可以使用JavaScript將JSON數據傳遞給HTML頁面，并且在頁面上進行展示和操作了。