Json

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <header>
 </header>
 <section>
 </section>
<script type="text/javascript">
var header = document.querySelector('header');
var section = document.querySelector('section');
var requestURL = 'https://chengxiangstart.github.io/workjson/hero.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var superHeroes = request.response;
alert(superHeroes.name);
populateHeader(superHeroes);
powerfulwork(superHeroes);
}
function populateHeader(jsonObj) {
var myH1 = document.createElement('h1');
myH1.textContent = jsonObj.sex;
header.appendChild(myH1);
var myPara = document.createElement('p');
myPara.textContent = '个人情况: 性别' + jsonObj['sex'] + ' // 力量: ' + jsonObj['strong']+'//身高:'+jsonObj['height'];
header.appendChild(myPara);
}
function powerfulwork(jsonObj){
 var heroes = jsonObj['power'];
 for (var i = 0; i < heroes.length; i++) {
 var myArticle = document.createElement('article');
    var myPara1 = document.createElement('p');
    var myPara2 = document.createElement('p');
    var myPara3 = document.createElement('p');
   myPara1.textContent = '能力: ' + heroes[i].ability;
   myPara2.textContent = '续航时间 ' + heroes[i].duration;
   myPara3.textContent = '等待时间'+heroes[i].waiting;
    myArticle.appendChild(myPara1);
    myArticle.appendChild(myPara2);
    myArticle.appendChild(myPara3);
    section.appendChild(myArticle);
  }
}
</script>
</body>
</html>
posted @ 2018-11-22 23:52  星光之晨  阅读(92)  评论(0编辑  收藏  举报