Using XmlHttpRequest 写JSON网页

最新推荐文章于 2025-12-02 15:30:13 发布

转载最新推荐文章于 2025-12-02 15:30:13 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuwei-0313/p/10001578.html

文章标签：

#json

本文展示了一个使用XMLHttpRequest从远程服务器获取JSON数据并解析显示的示例代码。通过发送GET请求到指定URL，该代码将返回的JSON数据转换为JavaScript对象，并利用这些数据动态生成HTML元素，包括头部信息和主体内容。

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

转载于:https://www.cnblogs.com/liuwei-0313/p/10001578.html