代码如下-----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. Socket:读写处理及连接断开的检测

    作为进程间通信及网络通信的一种重要技术,在实际的开发中,socket编程是经常被用到的.关于socket编程的一般步骤,这里不再赘述,相关资料和文章很多,google/baidu即可. 本文主要是探讨 ...

  2. 从一道题看线程安全--牛客网Java基础题

    从一道题看线程安全 Java中的线程安全是什么: 就是线程同步的意思,就是当一个程序对一个线程安全的方法或者语句进行访问的时候,其他的不能再对他进行操作了,必须等到这次访问结束以后才能对这个线程安全的 ...

  3. Spring Aop的理解和简单实现

    1.AOP概念 所说的面向切面编程其实就是在处理一系列业务逻辑的时候这一系列动作看成一个动作集合.比如连接数据库来说: 加载驱动-----获取class--------获取连接对象-------访问数 ...

  4. YOLO(Darknet官方)训练分类器

    目录 1. 分类数据准备 2. Darknet配置 3. Darknet命令使用 4. cifar-10 使用示例 1. 分类数据准备 需要的文件列表: 1. train.list : 训练的图片的绝 ...

  5. UVa 10382 喷水装置（贪心）

    https://vjudge.net/problem/UVA-10382 题意: 有一个长为l,宽为w的草坪,在其中心线不同位置有n个点状的喷水装置,喷水坐标为p,喷水半径为r.求喷到所有草坪的最少喷 ...

  6. JMeter源码导入到Intellij IDEA

    环境: Windows10,jdk1.8,Intellij IDEA 2018.1.5 x64,apache-jmeter-4.0_src.zip  http://jmeter.apache.org/ ...

  7. Seleniumz中 dr.quit()和dr.close()的区别

    /** * dr.quit()和dr.close()都可以退出浏览器,简单的说一下两者的区别:第一个close, * 如果打开了多个页面是关不干净的,它只关闭当前的一个页面.第二个quit, * 是退 ...

  8. JDK 12又来了，我学不动了...

    写在前面 看到 JDK 12又发布了,萌新不知不觉感觉瑟瑟发抖,从 Java 1.8的函数式编程思维和范式 到 Java 1.9的模块化特性的加持 以及还没来得及深切感受一下 Java 1.11 的 ...

  9. node 工程化 web项目

    1.结构 node_modules   ( ... ) routers     ( main.js  ) views    ( index.html   about.HTML  404.html ) ...

  10. RabbitMQ入门_05_多线程消费同一队列

    A. 多线程消费同一队列 参考资料:https://www.rabbitmq.com/tutorials/tutorial-two-java.html 消费一条消息往往比产生一条消息慢很多,为了防止消 ...