你需要有3个文件,分别为XXX.css XXX.json,XXX.js以及一个github账号
首先你的html代码中需要添加header以及section模块,如若没有,则会出现无法响应的情况。
其次是你XXX.css文件对其格式的设置
XXX.json文件则是写出你所需要展示的内容
var header = document.querySelector('header');
var section = document.querySelector('section');
var requestURL = 'https://raw.githubusercontent.com/AMARK-BRO/WINE/master/JSON.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 = '品评人: ' + jsonObj['homeTown'] + ' ※※ 品评年份: ' + jsonObj['formed'];
header.appendChild(myPara);
}
function showHeroes(jsonObj) {
var heroes = jsonObj['members'];
for(var 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 myList = document.createElement('ul');
myH2.textContent = heroes[i].name;
myPara1.textContent = '口感: ' + heroes[i].secretIdentity;
myPara2.textContent = '价钱: ' + heroes[i].age;
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
而XXX.js文件也是最为重要的调用以及解析的过程
而对于你json文件的解析,URL的生成一般由github的库里面添加入你的XXX.js文件从而得到一个URL。
效果图如上所示。