<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>人物介绍</title> <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <header> </header> <section> </section> <script> var header = document.querySelector('header'); var section = document.querySelector('section'); var requestURL = 'https://raw.githubusercontent.com/Jaehwanxi/secondpac/master/3.json'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; request.send(); request.onload = function() { var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); } function populateHeader(jsonObj) { var myH1 = document.createElement('h1'); myH1.textContent = jsonObj['Name']; header.appendChild(myH1); var myPara = document.createElement('p'); myPara.textContent = '地点: ' + jsonObj['site'] + ' // 拍摄于: ' + jsonObj['time']; header.appendChild(myPara); } function showHeroes(jsonObj) { var heroes = jsonObj['members']; for(i = 0; i < heroes.length; i++) { var myArticle = document.createElement('article'); var myH2 = document.createElement('h2'); var myPara1 = document.createElement('p'); var myPara2 = document.createElement('p'); var myPara3 = document.createElement('p'); var myList = document.createElement('ul'); myH2.textContent = heroes[i].name; myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; myPara2.textContent = 'sex: ' + heroes[i].sex; myPara3.textContent = 'Superpowers:'; var superPowers = heroes[i].specialPoint; for(j = 0; j < superPowers.length; j++) { var listItem = document.createElement('li'); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } } </script> </body> </html>
css代码来自于：https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css
效果如图：