将XMLrequest改写成fetch

Posted 2021-01-31 lightning-dog

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);
}
}

摘自：https://www.cnblogs.com/orange123/p/10179611.html