代码如下-----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. SQL Over

    与over函数结合的几个函数 create table #tab(A varchar(), B varchar()) insert into #tab select 'A1', 'B1' union ...

  2. Oracle 存储过程入门（一）

    一,基本入门介绍 公司系统需要用到oracle,可是还没在项目用过oracle,好吧,从基本学起.有问题的地方,欢迎指导啊. 看创建存储过程的基本定义.注意,带有[]的都是可选的,可有可无的.只是语法 ...

  3. Sql　最简单的Ｓｑｌｓｅｒｖｅｒ连接

    string name = txtUserName.Text.Trim();//移除用户名前部和后部的空格 string pwd = txtUserPwd.Text.Trim();//移除密码前部和后 ...

  4. json.dump()和json.dmups()的区别

    在python中支持json合适的数据是通过json模块实现的. 在序列化json数据的时候遇到两个形状很像的函数,dump()和dumps().主要说说他们的区别 先看看官方文档的说明:https: ...

  5. python 获取命令行输出结果

    status, output = commands.getstatusoutput("sudo rm -rf a.txt") if(not status): print(" ...

  6. ros 启动launch文件，附带参数

    roslaunch cartographer_ros cartographer_ref.launch resolution:=0.07 #下面是cartographer_ref.launch的内容 & ...

  7. MarkChanges: Jmeter

    1. 20180627 调整启动的内存set HEAP=-Xms1024m -Xmx1024m2. 20180627 调整输出格式为xml #jmeter.save.saveservice.outpu ...

  8. [库][c++]tinyxml2使用小结

    参考:http://blog.csdn.net/educast/article/details/12908455 1.配置TinyXML2 去这里把项目弄下来,然后解压,我们之需要里面的tinyxml ...

  9. 简明Docker教程

    Docker基础 这篇基础文章是方便用户在使用cSphere平台之前,了解docker基础知识. 针对已经有一定的Linux基础知识的用户. Docker是什么 Docker是一个改进的容器技术.具体 ...

  10. mac 下安装mongodb

    转载自https://segmentfault.com/a/1190000002547229 概念 MongoDB 是一个跨平台的,面向文档的数据库,提供高性能,高可用性和可扩展性方便. MongoD ...