代码如下-----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. Python3基础 list 推导式 生成与已知列表等长度+元素为0的列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  2. 如何Python写一个安卓APP

    前言:用Python写安卓APP肯定不是最好的选择,但是肯定是一个很偷懒的选择,而且实在不想学习Java,再者,就编程而言已经会的就Python与Golang(注:Python,Golang水平都一般 ...

  3. The destination you provided is not a full refname (i.e., starting with "refs/")

    $ git push v5 v5/hotfix/5.1:hotfix/5.1-quartzerror: The destination you provided is not a full refna ...

  4. Codeforces Round #542 [Alex Lopashev Thanks-Round] (Div. 1)

    A - Toy Train 很显然,一个站有多少个糖,那么就要从这个点运多少次.设第i个点有\(a_i\)个糖,那么就要转\(a_i-1\)圈,然后再走一段.很显然最后一段越小越好. 然后枚举起点后, ...

  5. js函数事件对象

    每个函数都有4个默认对象 arguments 保存着实际传入的参数,集合列表 return 有两个功能,打断函数和返回函数值 this 谁调用的函数,this就是谁 event 事件对象 事件 box ...

  6. POJ 3667 Hotel（线段树+区间合并）

    http://poj.org/problem?id=3667 题意: 有N个房间,M次操作.有两种操作(1)"1a",表示找到连续的长度为a的空房间,如果有多解,优先左边的,即表示 ...

  7. UVa 140 带宽

    题意:给出一个n个结点的图G和一个结点的排列,定义结点的带宽为i和相邻结点在排列中的最远距离,求出让带宽最小的结点排列. 思路:用STL的next_permutation来做确实是很方便,适当剪枝一下 ...

  8. booststrap select2的应用总结

    本身对前端js了解不是特别多,在项目中,遇到很多前端的问题,有时间整理一下,有不对的地方,不吝赐教,多多批评指正. 在项目中,遇到最多的select下拉框情景,莫过于多选和单选了 单选是很容易理解的, ...

  9. python后端工程师 数据爬虫

    大数据挖掘分析平台和产品的建设. 工作职责: 独立完成软件系统代码的设计与实现: 根据需求完成设计,代码编写,调试,测试和维护: 使用Python 语言对后台业务逻辑进行开发以及维护: 能根据实际需求 ...

  10. BM25 调参调研

    1. 搜索 ES 计算文本相似度用的 BM25,参数默认,不适合电商场景,可调整 BM25 参数使其适用于电商短文本场景 2. k1.b.tf.L.tfScore 的关系如下图红框内所示(注:这里的 ...