zoukankan      html  css  js  c++  java
  • json解析实例

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
    
        <title>Our superheroes</title>
    
        <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> 
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" type="text/css" href="main.js">
      </head>
    
      <body>
    
          <header>
    
    
          </header>
    
          <section>
    
          </section>
    
        <script src="main.js">
       
        </script>
      </body>
    </html>
    html {
      font-family: 'helvetica neue', helvetica, arial, sans-serif;
    }
    
    body {
      width: 800px;
      margin: 0 auto;
    }
    
    h1, h2 {
      font-family: 'Faster One', cursive;
    }
    
    /* header styles */
    
    h1 {
      font-size: 4rem;
      text-align: center;
    }
    
    header p {
      font-size: 1.3rem;
      font-weight: bold;
      text-align: center;
    }
    
    /* section styles */
    
    section article {
      width: 33%;
      float: left;
    }
    
    section p {
      margin: 5px 0;
    }
    
    section ul {
      margin-top: 0;
    }
    
    h2 {
      font-size: 2.5rem;
      letter-spacing: -5px;
      margin-bottom: 10px;
    }
    {
    var
    header = document.querySelector('header'); var section = document.querySelector('section'); var requestURL ='https://gist.githubusercontent.com/HL345/7774958ea5a7dcf1d03f625067e701f5/raw/cb81ed0bd64ad13a94e4c41e09b0ad3b6e08161d/2.json';//:""和''中的都是string var request = new XMLHttpRequest();//API接口 request.open('GET', requestURL);//获取URL中的内容 request.responseType = 'json'; request.send(); request.onload = function() { var superHeroes = request.response;//superheroes 变量作用于函数中 populateHeader(superHeroes);//前面无对象所以是函数/将superheros的内容填写到header中 showHeroes(superHeroes);//在网页上显示 } function populateHeader(jsonObj) { //自定义populateheader函数 var myH1 = document.createElement('h1');//创建h1元素并将给myH1赋值 myH1.textContent = jsonObj['squadName']; header.appendChild(myH1);//将myh1节点添加到header节点后 var myPara = document.createElement('p');//myPara是个对象//dom 的元素都是对象 myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + 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 myPara3 = document.createElement('p'); var myList = document.createElement('ul'); myH2.textContent = heroes[i].name; myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; myPara2.textContent = 'Age: ' + heroes[i].age; myPara3.textContent = 'Superpowers:'; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement('li'); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle);//即是节点也是容器 } }
  • 相关阅读:
    SharePoint 2013 图文开发系列之自定义字段
    SharePoint 2013 图文开发系列之Visual Studio 创建母版页
    SharePoint 2013 图文开发系列之代码定义列表
    SharePoint 2013 图文开发系列之计时器任务
    SharePoint 2013 图文开发系列之应用程序页
    SharePoint 2013 图文开发系列之事件接收器
    SharePoint 2013 图文开发系列之可视化WebPart
    SharePoint 2013 图文开发系列之WebPart
    SharePoint 2013 对二进制大型对象(BLOB)进行爬网
    SharePoint 2013 状态机工作流之日常报销示例
  • 原文地址:https://www.cnblogs.com/HL345/p/9978807.html
Copyright © 2011-2022 走看看