代码如下-----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. React 回忆录（一）为什么使用 React？

    Hi 各位,欢迎来到 React 回忆录!

  2. Python3基础 json.loads 解析json格式的数据，得到一个字典

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

  3. win7下配置IIS

    Internet Information Services(IIS,互联网信息服务),是由微软公司提供的基于运行Microsoft Windows的互联网基本服务.最初是Windows NT版本的可选 ...

  4. Java ArrayDeque源码剖析

    ArrayDeque 本文github地址 前言 Java里有一个叫做Stack的类,却没有叫做Queue的类(它是个接口名字).当需要使用栈时,Java已不推荐使用Stack,而是推荐使用更高效的A ...

  5. kafka删除一个topic

    前言 当我们在shell中执行topic删除命令的时候` kafka-topics --delete --topic xxxx --zookeeper xxx`,会显示,xxxx已经被标记为删除.然后 ...

  6. SublimeText3常用快捷键和优秀插件（亲测）

    SublimeText3常用快捷键和优秀插件 SublimeText是前端的一个神器,以其精简和可DIY而让广大fans疯狂.好吧不吹了直入正题 -_-!! 首先是安装,如果你有什么软件管家的话搜一下 ...

  7. Educational Codeforces Round 53 Editorial

    After I read the solution to the problem, I found that my solution was simply unsightly. Solved 4 ou ...

  8. UVa 208 消防车（dfs+剪枝）

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. JS进阶系列之this

    在javascript中,this的指向是在执行上下文的创建阶段确定的,其实只要知道不同执行方式下,this的指向分别是是什么,就能很好的掌握this这个让人摸不透的东西. 一.全局执行 全局执行又分 ...

  10. Varnish 一般是放在 Nginx 前面还是后面的？

    1.varnish官网有写. 如果用ssl前面肯定得有nginx. 如果没有ssl看你实际需求.可以varnish,然后nginx,然后app. 看怎么设计了. 2.Varnish 通常是在两种情况下 ...