Using XmlHttpRequest 写JSON网页

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>星座</title>
 6 <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
 7 <link rel="stylesheet" type="text/css" href="css/cons.css">
 8 </head>
 9 <body>
10     
11 <header >
12 </header><!-- /header -->
13 <section>
14 </section>
15 <script src="js/cons.js" >
16 </script>
17 </body>
18 </html>

 1 var header = document.querySelector('header');
 2 var section = document.querySelector('section');
 3 
 4 var requestURL = 'https://raw.githubusercontent.com/KylinBio-healthTechnology/-constellations/master/constellations.json';
 5 var request = new XMLHttpRequest();
 6 request.open('GET', requestURL);
 7 request.responseType = 'json';
 8 request.send();
 9 
10 request.onload = function() {
11   var constellations = request.response;
12   //var constellations = JSON.parse(constellationsText);
13   populateHeader(constellations);
14   showcon(constellations);
15 }
16 
17 
18 function populateHeader(jsonObj) {
19   var myH1 = document.createElement('h1');
20   myH1.textContent = jsonObj['mainname'];
21   header.appendChild(myH1);
22 
23   var myPara = document.createElement('p');
24   myPara.textContent = '//Year: ' + jsonObj['formed'];
25   header.appendChild(myPara);
26 }
27 
28 function showcon(jsonObj) {
29   var con = jsonObj['members'];
30 
31   for (var i = 0; i < con.length; i++) 
32   { var myArticle = document.createElement('article');
33     var myH2 = document.createElement('h2');
34     var myPara1 = document.createElement('p');
35     var myPara2 = document.createElement('p');
36     var myPara3 = document.createElement('p');
37     var myPara4 = document.createElement('p');
38     var myPara5 = document.createElement('p');
39     var myPara6 = document.createElement('p');
40     var myList = document.createElement('ul');
41 
42     myH2.textContent = con[i].name;
43     myPara1.textContent = 'English: ' + con[i].English;
44     myPara2.textContent = 'time: ' + con[i].time;
45     myPara3.textContent = 'alias: ' + con[i].alias;
46     myPara4.textContent = 'symble: ' + con[i].symble;
47     myPara5.textContent = 'planet: ' + con[i].planet;
48     myPara6.textContent = 'flower:';
49 
50 
51     var cons = con[i].flower;
52     for (var j = 0; j < cons.length; j++) {
53       var listItem = document.createElement('li');
54       listItem.textContent = cons[j];
55       myList.appendChild(listItem);
56     }
57 
58     myArticle.appendChild(myH2);
59     myArticle.appendChild(myPara1);
60     myArticle.appendChild(myPara2);
61     myArticle.appendChild(myPara3);
62     myArticle.appendChild(myPara4);
63     myArticle.appendChild(myPara5);
64     myArticle.appendChild(myPara6);
65     myArticle.appendChild(myList);
66 
67     section.appendChild(myArticle);
68   }
69 }

 json文件：

https://raw.githubusercontent.com/KylinBio-healthTechnology/-constellations/master/constellations.json
posted @ 2018-11-22 15:58  暖橘  阅读(353)  评论(0)  编辑  收藏  举报