var header = document.querySelector(‘header’);var section = document.querySelector(‘section’);
fetch('https://raw.githubusercontent.com/gmhcy/ONEPIECE/master/onepiece.json')
.then(function(response)
{ return response.json();
})
.then(function(myJson) {
var onepiece = myJson;
onepieceHeader(onepiece);showpeople(onepiece);
});
function onepieceHeader(jsonObj){var headline=document.createElement(‘h1’);headline.textContent=jsonObj[‘tou’];header.appendChild(headline);var jies=document.createElement(‘p’);jies.textContent=jsonObj[‘jieshao’];header.appendChild(jies);}function showpeople(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 myPara3 = document.createElement(‘p’);var myPara4 = document.createElement(‘p’);myH2.textContent = heroes[i].name;myPara1.textContent = ‘age: ‘ + heroes[i].age;myPara2.textContent = ‘power: ‘ + heroes[i].power;myPara3.textContent = ‘hobby:’+heroes[i].hobby;myPara4.textContent = ‘dream:’+heroes[i].dream;myArticle.appendChild(myH2);myArticle.appendChild(myPara1);myArticle.appendChild(myPara2);myArticle.appendChild(myPara3);myArticle.appendChild(myPara4);section.appendChild(myArticle);}}
搬运:http://www.ynmm5.cc/index.php/2018/12/05/将xmlrequest-改写成fetch/
转载于:https://www.cnblogs.com/kazama/p/10197587.html
相关资源:JAVA上百实例源码以及开源项目