JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。有关于json的相关信息,可参考:json百度百科。
1、HTML文档
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Read Json File</title> <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> </header> <section> </section> <script src="js/readJSON.js"></script> </body> </html>
2、js文档:readJSON.js
//获取<header>和</section>的引用 let header = document.querySelector('header'); let section = document.querySelector('section'); //保存一个json文件访问的URL作为一个变量 let requestURL = 'json/superheroes.json'; //创建一个HTTP请求对象 let request = new XMLHttpRequest(); //使用open()打开一个新请求 request.open('GET', requestURL); //设置XHR访问JSON格式数据,然后发送请求 // request.responseType = 'json'; //设置XHR访问text格式数据 request.responseType = 'text'; request.send(); //处理来自服务器的数据 request.onload = function() { let superHeroesText = request.response; let superHeroes = JSON.parse(superHeroesText); // let superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); }; //对header进行定位 function populateHeader(jsonObj) { let myH1 = document.createElement('h1'); myH1.textContent = jsonObj['squadName']; header.appendChild(myH1); let myPara = document.createElement('p'); myPara.textContent = 'Hometown: ' + jsonObj['hometown'] + ' //Formed: ' + jsonObj['formed']; header.appendChild(myPara); } function showHeroes(jsonObj) { //用heroers存储json文件里menbers的信息 let heroes = jsonObj['members']; for (let i = 0; i < heroes.length; i++) { //创建一系列页面元素 let myArticle = document.createElement('article'); let myH2 = document.createElement('h2'); let myPara1 = document.createElement('p'); let myPara2 = document.createElement('p'); let myPara3 = document.createElement('p'); let myList = document.createElement('ul'); myH2.textContent = heroes[i].name; myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; myPara2.textContent = 'Age: ' + heroes[i].age; myPara3.textContent = 'Superpowers:'; let superPowers = heroes[i].powers; for(let j = 0; j < superPowers.length; j++) { let 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); } }
3、CSS文档:readJSONStyle.css
html, body { margin: 0; } html { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; height: 100%; } body { overflow: hidden; height: inherit; } h1 { font-size: 2rem; letter-spacing: -1px; position: absolute; margin: 0; top: -4px; right: 5px; color: transparent; text-shadow: 0 0 4px white; }
4、json文件:heros.json
{ "squadName" : "Super hero squad", "homeTown" : "Metro City", "formed" : 2016, "secretBase" : "Super tower", "active" : true, "members" : [ { "name" : "Molecule Man", "age" : 29, "secretIdentity" : "Dan Jukes", "powers" : [ "Radiation resistance", "Turning tiny", "Radiation blast" ] }, { "name" : "Madame Uppercut", "age" : 39, "secretIdentity" : "Jane Wilson", "powers" : [ "Million tonne punch", "Damage resistance", "Superhuman reflexes" ] }, { "name" : "Eternal Flame", "age" : 1000000, "secretIdentity" : "Unknown", "powers" : [ "Immortality", "Heat Immunity", "Inferno", "Teleportation", "Interdimensional travel" ] } ] }
实现效果: