當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
Working With JSON
生活随笔
收集整理的這篇文章主要介紹了
Working With JSON
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
JavaScript對(duì)象表示法（JSON）是用于將結(jié)構(gòu)化數(shù)據(jù)表示為JavaScript對(duì)象的標(biāo)準(zhǔn)格式，通常用于在網(wǎng)站上表示和傳輸數(shù)據(jù)（例如從服務(wù)器向客戶端發(fā)送一些數(shù)據(jù)，因此可以將其顯示在網(wǎng)頁(yè)上）。 JSON是一種按照J(rèn)avaScript對(duì)象語(yǔ)法的數(shù)據(jù)格式,你可以把 JavaScript 對(duì)象原原本本的寫(xiě)入 JSON 數(shù)據(jù)——字符串，數(shù)字，數(shù)組，布爾還有其它的字面值對(duì)象。雖然它是基于 JavaScript 語(yǔ)法，但它獨(dú)立于JavaScript。
下面是一個(gè)在Javascript中使用遠(yuǎn)端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 //通過(guò) 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 = '外號(hào)：'+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文件內(nèi)容如下:
1 { 2 "squadName" : "草叢三兄弟", 3 "members" : [ 4 { 5 "name" : "蓋倫", 6 "surname":"草叢侖、大寶劍", 7 "skill":[ 8 "堅(jiān)韌", 9 "致命打擊", 10 "勇氣", 11 "審判", 12 "德瑪西亞正義" 13 ] 14 }, 15 { 16 "name" : "趙信", 17 "surname":"菊花信", 18 "skill":[ 19 "果決", 20 "三重爪擊", 21 "風(fēng)斬電刺", 22 "無(wú)畏沖鋒", 23 "新月護(hù)衛(wèi)" 24 ] 25 }, 26 { 27 "name" : "嘉文四世", 28 "surname":"周杰倫", 29 "skill":[ 30 "戰(zhàn)爭(zhēng)律動(dòng)", 31 "巨龍撞擊", 32 "黃金圣盾", 33 "德邦軍旗", 34 "天崩地裂" 35 ] 36 } 37 ] 38 }result:
轉(zhuǎn)載于:https://www.cnblogs.com/hzhqiang/p/9975092.html
總結(jié)
以上是生活随笔為你收集整理的Working With JSON的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Top Android App使用的组件
- 下一篇： javascript检测浏览器是否需要升