GET方法是一種HTTP請(qǐng)求方法，用于請(qǐng)求指定的資源。當(dāng)我們請(qǐng)求一個(gè)JSON數(shù)據(jù)時(shí)，服務(wù)器會(huì)將需要展示的數(shù)據(jù)以JSON格式返回給我們，前端開(kāi)發(fā)人員可以選擇使用AJAX或者Fetch等方式調(diào)用該API接口來(lái)獲取該數(shù)據(jù)。

const url = 'https://example.com/api/data';
fetch(url)
.then(res =>res.json())
.then(data =>console.log(data))
.catch(error =>console.log(error));

上面的代碼我們使用了Fetch方法調(diào)用了API接口，并使用.then()函數(shù)通過(guò)JSON()方法將返回的數(shù)據(jù)轉(zhuǎn)換為JavaScript對(duì)象，最后我們使用console.log()將該數(shù)據(jù)輸出到控制臺(tái)。

一旦我們得到了需要展示的JSON數(shù)據(jù)，就可以將該數(shù)據(jù)渲染到頁(yè)面上了。使用循環(huán)和模板字符串可以非常方便地將JSON數(shù)據(jù)展示在頁(yè)面上。

const data = [
{ id: 1, name: "John" },
{ id: 2, name: "Peter" },
{ id: 3, name: "David" }
];
const container = document.querySelector(".container");
let html = ""; // 初始化字符串
data.forEach(item =>{
html += `
${item.id}${item.name}
`;
});
container.innerHTML = html;

上面的代碼將一個(gè)JSON數(shù)組渲染到一個(gè)class為container的元素中，使用一個(gè)forEach循環(huán)遍歷數(shù)組并將每一項(xiàng)渲染成一個(gè)div元素，最后將整個(gè)字符串放入container元素中展示。