zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    一个表缺失索引发的CPU资源瓶颈案例
    SQLServer 版本之八大方法搞清 "我是谁"
    DBA成长路线
    SQL Server2016升级前几点自检
    SQL Server 2016白皮书
    <译>通过PowerShell工具跨多台服务器执行SQL脚本
    /lib64/libc.so.6: version `GLIBC_2.17' not found
    /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found
    HGT高程数据文件格式解析
    DEM高程数据下载资源
  • 原文地址:https://www.cnblogs.com/chengxiangboke/p/10004894.html
Copyright © 2011-2022 走看看