JSON作為一種輕量級的數據交換格式,在Web開發中廣泛地應用。在前后端分離的開發模式中,后端通常會通過API接口返回JSON格式的數據給前端,前端則通過JavaScript解析JSON數據并將其展示在頁面上。下面介紹一下如何通過JavaScript將返回的JSON數據展示在頁面上。
//假設API接口返回的JSON數據如下: { "name": "張三", "age": 20 } //首先我們需要獲取到API返回的JSON數據 let jsonStr = '{"name": "張三", "age": 20}'; //然后將JSON數據解析為JavaScript對象 let jsonObj = JSON.parse(jsonStr); //接下來就可以通過JavaScript動態地將JSON數據展示在頁面上了 let div = document.createElement('div'); div.innerHTML = '<p>姓名:' + jsonObj.name + '</p><p>年齡:' + jsonObj.age + '</p>'; document.body.appendChild(div);
在上面的代碼中,我們首先通過JSON.parse方法將JSON字符串解析為JavaScript對象,然后通過該對象的屬性值動態地將JSON數據展示在頁面上。值得注意的是,在展示JSON數據的過程中,我們可以使用各種HTML標簽和樣式,來使數據更加易讀和美觀。