1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Our supersheet</title> 6 <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> 7 <link rel="stylesheet" type="text/css" href="style.css"> 8 </head> 9 10 <body> 11 <header > 12 13 </header><!-- /header --> 14 15 <section> 16 17 </section> 18 <script src="script/main.js"> 19 20 </script> 21 </body> 22 </html>
style.css
1 /* || general styles */ 2 3 html { 4 font-family: 'helvetica neue', helvetica, arial, sans-serif; 5 } 6 7 body { 8 width: 800px; 9 margin: 0 auto; 10 } 11 12 h1, h2 { 13 font-family: 'Faster One', cursive; 14 } 15 16 /* header styles */ 17 18 h1 { 19 font-size: 4rem; 20 text-align: center; 21 } 22 23 header p { 24 font-size: 1.3rem; 25 font-weight: bold; 26 text-align: center; 27 } 28 29 /* section styles */ 30 31 section article { 32 width: 33%; 33 float: left; 34 } 35 36 section p { 37 margin: 5px 0; 38 } 39 40 section ul { 41 margin-top: 0; 42 } 43 44 h2 { 45 font-size: 2.5rem; 46 letter-spacing: -5px; 47 margin-bottom: 10px; 48 }
main.js
1 var header = document.querySelector('header'); 2 var section = document.querySelector('section'); 3 4 var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; 5 var request = new XMLHttpRequest();//API,创建请求，只需要更新小部分而无需加载整个页面 6 request.open('GET', requestURL);//初始化请求，get--HTTP方法 7 request.responseType = 'text';//响应类型 8 request.send();//send方法，发送请求 9 10 request.onload = function() {//request，声明的对象；onload，自定义的方法 11 var superHeroesText = request.response;//response，属性 12 var superHeroes = JSON.parse(superHeroesText); 13 populateHeader(superHeroes);//自定义函数，调用 14 showHeroes(superHeroes);//superHeroes作用域在function，基于json的js对象 15 } 16 /** 17 * [populateHeader description] 18 * @param {[type]} jsonObj [description] 19 * @return {[type]} [description] 20 */ 21 function populateHeader(jsonObj) {//函数定义，形参 22 var myH1 = document.createElement('h1');//声明变量myH1,赋值h1元素 23 myH1.textContent = jsonObj['squadName'];//文本内容属性，赋值squadName对象的属性 24 header.appendChild(myH1);//header结点，增加一个myH1子节点，将其附加到标题appendChild() 25 26 var myPara = document.createElement('p');// 27 myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];//把对象home Town和formed属性的lianjiezifuc 28 header.appendChild(myPara); 29 30 } 31 /** 32 * [showHeroes description] 33 * @param {[type]} jsonObj [description] 34 * @return {[type]} [description] 35 */ 36 function showHeroes(jsonObj) {//创建并显示超级英雄卡 37 var heroes = jsonObj['members']; 38 39 for (var i = 0; i < heroes.length; i++) {//members数组对象；创建了几个新元素article、h2。。。。 40 var myArticle = document.createElement('article'); 41 var myH2 = document.createElement('h2'); 42 var myPara1 = document.createElement('p'); 43 var myPara2 = document.createElement('p'); 44 var myPara3 = document.createElement('p'); 45 var myList = document.createElement('ul'); 46 47 myH2.textContent = heroes[i].name; 48 myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; 49 myPara2.textContent = 'Age: ' + heroes[i].age; 50 myPara3.textContent = 'Superpowers:';//值为数组，又用一个循环处理 51 52 var superPowers = heroes[i].powers;//嵌套循环， 53 for (var j = 0; j < superPowers.length; j++) { 54 var listItem = document.createElement('li'); 55 listItem.textContent = superPowers[j]; 56 myList.appendChild(listItem); 57 } 58 59 myArticle.appendChild(myH2);//在myArticle中增加子节点，把获取的值显现在html中 60 myArticle.appendChild(myPara1); 61 myArticle.appendChild(myPara2); 62 myArticle.appendChild(myPara3); 63 myArticle.appendChild(myList); 64 65 section.appendChild(myArticle);//把myArticle的值放入section 66 } 67 }
json文件（https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json）
1 { 2 "squadName" : "Super hero squad", 3 "homeTown" : "Metro City", 4 "formed" : 2016, 5 "secretBase" : "Super tower", 6 "active" : true, 7 "members" : [ 8 { 9 "name" : "Molecule Man", 10 "age" : 29, 11 "secretIdentity" : "Dan Jukes", 12 "powers" : [ 13 "Radiation resistance", 14 "Turning tiny", 15 "Radiation blast" 16 ] 17 }, 18 { 19 "name" : "Madame Uppercut", 20 "age" : 39, 21 "secretIdentity" : "Jane Wilson", 22 "powers" : [ 23 "Million tonne punch", 24 "Damage resistance", 25 "Superhuman reflexes" 26 ] 27 }, 28 { 29 "name" : "Eternal Flame", 30 "age" : 1000000, 31 "secretIdentity" : "Unknown", 32 "powers" : [ 33 "Immortality", 34 "Heat Immunity", 35 "Inferno", 36 "Teleportation", 37 "Interdimensional travel" 38 ] 39 } 40 ] 41 }
结果如下：https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html