當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
Working With JSON
生活随笔
收集整理的這篇文章主要介紹了
Working With JSON
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript對象表示法（JSON）是用于將結構化數據表示為JavaScript對象的標準格式，通常用于在網站上表示和傳輸數據（例如從服務器向客戶端發送一些數據，因此可以將其顯示在網頁上）。 JSON是一種按照JavaScript對象語法的數據格式,你可以把 JavaScript 對象原原本本的寫入 JSON 數據——字符串，數字，數組，布爾還有其它的字面值對象。雖然它是基于 JavaScript 語法，但它獨立于JavaScript。
下面是一個在Javascript中使用遠端JSON的示例：
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <meta charset="utf-8"> 8 9 <title>草叢三兄弟</title> 10 11 <link rel="stylesheet" href="style.css"> 12 13 </head> 14 <body> 15 <header> </header> 16 <section></section> 17 18 <script> 19 20 var header = document.querySelector('header'); 21 22 var section = document.querySelector('section'); 23 24 //通過 XMLHttpRequest API 獲取Github上的JSON文件 25 var requestURL = 'https://raw.githubusercontent.com/git0null/-json/master/caocongsanxiongdi.json'; 26 var request = new XMLHttpRequest(); 27 request.open('GET', requestURL); 28 request.responseType = 'json'; 29 request.send(); 30 31 request.onload = function() { 32 var obj = request.response; 33 populateHeader(obj); 34 showHeroes(obj); 35 } 36 37 function populateHeader(jsonObj) { 38 var myH1 = document.createElement('h1'); 39 myH1.textContent = jsonObj.squadName; 40 header.appendChild(myH1); 41 42 var myH2 = document.createElement('h2'); 43 myH2.textContent = '成員:'; 44 header.appendChild(myH2); 45 } 46 function showHeroes(jsonObj) { 47 var heroes = jsonObj.members; 48 49 for(i = 0; i < heroes.length; i++) { 50 var myArticle = document.createElement('article'); 51 var myH3 = document.createElement('h3'); 52 var p2 = document.createElement('p'); 53 var p3 = document.createElement('p'); 54 var myList = document.createElement('ul'); 55 56 myH3.textContent = heroes[i].name; 57 p2.textContent = '外號：'+heroes[i].surname; 58 p3.textContent = '技能:'; 59 var skill = heroes[i].skill; 60 for(j = 0; j < skill.length; j++) { 61 var listItem = document.createElement('li'); 62 listItem.textContent = skill[j]; 63 myList.appendChild(listItem); 64 } 65 myArticle.appendChild(myH3); 66 myArticle.appendChild(p2); 67 myArticle.appendChild(p3); 68 myArticle.appendChild(myList); 69 section.appendChild(myArticle); 70 } 71 } 72 73 </script> 74 75 </body> 76 77 </html>?本例中JSON文件內容如下:
1 { 2 "squadName" : "草叢三兄弟", 3 "members" : [ 4 { 5 "name" : "蓋倫", 6 "surname":"草叢侖、大寶劍", 7 "skill":[ 8 "堅韌", 9 "致命打擊", 10 "勇氣", 11 "審判", 12 "德瑪西亞正義" 13 ] 14 }, 15 { 16 "name" : "趙信", 17 "surname":"菊花信", 18 "skill":[ 19 "果決", 20 "三重爪擊", 21 "風斬電刺", 22 "無畏沖鋒", 23 "新月護衛" 24 ] 25 }, 26 { 27 "name" : "嘉文四世", 28 "surname":"周杰倫", 29 "skill":[ 30 "戰爭律動", 31 "巨龍撞擊", 32 "黃金圣盾", 33 "德邦軍旗", 34 "天崩地裂" 35 ] 36 } 37 ] 38 }result:
轉載于:https://www.cnblogs.com/hzhqiang/p/9975092.html
總結
以上是生活随笔為你收集整理的Working With JSON的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Top Android App使用的组件
- 下一篇： javascript检测浏览器是否需要升