代码如下-----xmlhttprequest.responseJSON：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>星座</title>

 <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">

 <link rel="stylesheet" type="text/css" href="css/cons.css">

 </head>

 <body>

 <header >

 </header><!-- /header -->

 <section>

 </section>

 <script src="js/cons.js" >

 </script>

 </body>

 </html>

 var header = document.querySelector('header');

 var section = document.querySelector('section');

 var requestURL = 'https://raw.githubusercontent.com/KylinBio-healthTechnology/-constellations/master/constellations.json';

 var request = new XMLHttpRequest();

 request.open('GET', requestURL);

 request.responseType = 'json';

 request.send();

 request.onload = function() {

   var constellations = request.response;

   //var constellations = JSON.parse(constellationsText);

   populateHeader(constellations);

   showcon(constellations);

 }

 function populateHeader(jsonObj) {

   var myH1 = document.createElement('h1');

   myH1.textContent = jsonObj['mainname'];

   header.appendChild(myH1);

   var myPara = document.createElement('p');

   myPara.textContent = '//Year: ' + jsonObj['formed'];

   header.appendChild(myPara);

 }

 function showcon(jsonObj) {

   var con = jsonObj['members'];

   for (var i = 0; i < con.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');

     var myPara5 = document.createElement('p');

     var myPara6 = document.createElement('p');

     var myList = document.createElement('ul');

     myH2.textContent = con[i].name;

     myPara1.textContent = 'English: ' + con[i].English;

     myPara2.textContent = 'time: ' + con[i].time;

     myPara3.textContent = 'alias: ' + con[i].alias;

     myPara4.textContent = 'symble: ' + con[i].symble;

     myPara5.textContent = 'planet: ' + con[i].planet;

     myPara6.textContent = 'flower:';

     var cons = con[i].flower;

     for (var j = 0; j < cons.length; j++) {

       var listItem = document.createElement('li');

       listItem.textContent = cons[j];

       myList.appendChild(listItem);

     }

     myArticle.appendChild(myH2);

     myArticle.appendChild(myPara1);

     myArticle.appendChild(myPara2);

     myArticle.appendChild(myPara3);

     myArticle.appendChild(myPara4);

     myArticle.appendChild(myPara5);

     myArticle.appendChild(myPara6);

     myArticle.appendChild(myList);

     section.appendChild(myArticle);

   }

 }

json文件：

https://raw.githubusercontent.com/KylinBio-healthTechnology/-constellations/master/constellations.json

Using XmlHttpRequest 写JSON网页的更多相关文章

  1. Aras SP9里打开自己写的网页。

    首先把自己写的网页挂在IIS里或者网站挂到IIS里面. 然后再Aras里新增method //网页参数 var dialogArguments = new Array(); //窗体参数 var op ...

  2. JAVA写JSON的三种方法，java对象转json数据

    JAVA写JSON的三种方法,java对象转json数据 转自:http://www.xdx97.com/#/single?bid=5afe2ff9-8cd1-67cf-e7bc-437b74c07a ...

  3. 从写json作业谈起

    json的数据格式我经常见到,但是真正的写json的处理时,我又不会了,com.alibaba.fast.json. com.jackson.看了网上的博客,我可以写出简单java对象转换为json字 ...

  4. 转---写一个网页进度loading

    作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...

  5. Unity的Json解析<二>–写Json文件

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50378805 作者:car ...

  6. 写一个网页进度loading

    作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...

  7. 2. 妈呀，Jackson原来是这样写JSON的

    没有人永远18岁,但永远有人18岁.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免费学习.关注公众 ...

  8. 3. 懂了这些，方敢在简历上说会用Jackson写JSON

    你必须非常努力,才能看起来毫不费力.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免费学习.关注公众 ...

  9. 借助bootstrap框架模仿airbnb写的网页

    View HTML .nav a { color: #5a5a5a; font-size: 11px; font-weight: bold; padding: 14px 10px; text-tran ...

随机推荐

  1. 常用模块之 shutil，json，pickle，shelve，xml，configparser

    shutil 高级的文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length]) 将文件内容拷贝到另一个文件中 import shutil shut ...

  2. 【第九章】 springboot + mybatis + 多数据源 （AOP实现）

    在第八章 springboot + mybatis + 多数据源代码的基础上,做两点修改 1.ShopDao package com.xxx.firstboot.dao; import org.spr ...

  3. 马尔科夫随机场模型（MRF-Markov Random Field）

    原文: http://blog.sina.com.cn/s/blog_92c398b00102vs3q.html 马尔科夫过程​ 隐马尔科夫过程​​ 与马尔科夫相比,隐马尔可夫模型则是双重随机过程,不 ...

  4. 【eclipse】阿里巴巴代码检测插件在线安装

    https://p3c.alibaba.com/plugin/eclipse/update

  5. U盘中病毒了怎么办

    声明: 该方案仅是我处理自己U盘的心得,如果您看到这篇文件,并使用此方法,有任何数据丢失或者损失,我概不负责 问题: U盘里面显示占用了空间,就是看不到文件,或者仅有一两个自己不认识的文件 处理方案: ...

  6. 08_Flume_Selector实践

    实践一:replicating selector 1.目标场景 selector将event复制,分发给所有下游节点 2.Flume Agent配置 Agent配置 # Name the compon ...

  7. POJ 2117 Electricity（割点求连通分量）

    http://poj.org/problem?id=2117 题意:求删除图中任意一个顶点后的最大连通分量数. 思路: 求出每个割点对应的连通分量数,注意这道题目中图可能是不连通的. 这道题目我wa了 ...

  8. GATK 一些资料

    1. http://blog.sciencenet.cn/home.php?mod=space&uid=1469385&do=blog&classid=166694&v ...

  9. 【Python】【有趣的模块】【Bobo】

    [python web框架之 bobo的安装配置] [Mac] 我的Mac环境,python3.5 1. 安装bobo  :   >>> pip3 install bobo 2. 配 ...

  10. bzoj 1832 lca

    1832: [AHOI2008]聚会 Time Limit: 10 Sec  Memory Limit: 64 MB Description Y岛风景美丽宜人,气候温和,物产丰富.Y岛上有N个城市,有 ...