HTML代码：
<!DOCTYPE html><html> ?<head> ???<meta charset="utf-8"> ???<title>Our superheroes</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://mdn.github.io/learning-area/javascript/oojs/json/superheroes.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[‘squadName‘]; ?header.appendChild(myH1); ?var myPara = document.createElement(‘p‘); ?myPara.textContent = ‘Hometown: ‘ + jsonObj[‘homeTown‘] + ‘ // Formed: ‘ + jsonObj[‘formed‘]; ?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 = ‘Age: ‘ + heroes[i].age; ???myPara3.textContent = ‘Superpowers:‘; ???var superPowers = heroes[i].powers; ???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); ?????} ???} ???request.responseType = ‘json‘; ???request.open(‘GET‘, requestURL);request.responseType = ‘text‘; // now we‘re getting a string!request.send();request.onload = function() { ?var superHeroesText = request.response; // get the string from the response ?var superHeroes = JSON.parse(superHeroesText); // convert it to an object ?populateHeader(superHeroes); ?showHeroes(superHeroes);}var myJSON = { "name": "Chris", "age": "38" };myJSONvar myString = JSON.stringify(myJSON);myString ???</script> ?</body></html>CSS代码：
/* || general styles */html { ?font-family: ‘helvetica neue‘, helvetica, arial, sans-serif;}body { ?width: 800px; ?margin: 0 auto;}h1, h2 { ?font-family: ‘Faster One‘, cursive;}/* header styles */h1 { ?font-size: 4rem; ?text-align: center;}header p { ?font-size: 1.3rem; ?font-weight: bold; ?text-align: center;}/* section styles */section article { ?width: 33%; ?float: left;}section p { ?margin: 5px 0;}section ul { ?margin-top: 0;}h2 { ?font-size: 2.5rem; ?letter-spacing: -5px; ?margin-bottom: 10px;}网页效果：
JSON的一个例子（代码来源于网上）
原文地址：https://www.cnblogs.com/vagrant-yangshun/p/10317479.html