My json(Demo)

 1 {
 2     "mainactors": [{
 3             "image":"E:/vs code/my html/MyFirstWeb_姜辛_201710422107/picture.838ba61ea8d3fd1f509b00433b4e251f95ca5f3c.jpg",
 4             "character": "布鲁斯·韦恩",
 5             "actor": "演员:克里斯蒂安·贝尔",
 6             "story": "大部分时间,韦恩老爷都是哥潭市的花花公子和家族企业CEO,但当这座城市面临危机的时候,当欺诈、暴力、犯罪企图玷污这座城市的时候,他就是正义之神蝙蝠侠。幼小时他目睹了自己的父母死在罪犯手下,从此抛弃了优渥的生活,走南闯北,接受“影武者”联盟的特训,并为自己配备了高科技武器,在夜晚独自维护哥潭市的安宁。"
 7         },
 8 
 9         {
10             "image":"E:/vs code/my html/MyFirstWeb_姜辛_201710422107/picture.a8ec8a13632762d07e6409c6abec08fa513dc675.jpg",
11             "character": "小丑",
12             "actor": "演员:希斯·莱杰",
13             "story": "在戈登局长的大力配合下,蝙蝠侠不再是孤独的英雄,哥潭市正在从黑暗的边缘回到风气清明的安全城市。此时出现了一名叫做“小丑”的狂人。他不在乎金钱,也不求名利,他制造爆炸和屠杀,小丑所要做的就是对人性重新做考量,他要迫使从不杀人的蝙蝠侠手上染血。"
14         },
15 
16         {
17             "image":"E:/vs code/my html/MyFirstWeb_姜辛_201710422107/picture.4034970a304e251f810c4981ac86c9177e3e53cb.jpg",
18             "character": "哈维·丹特",
19             "actor": "演员:艾伦·艾克哈特",
20             "story": "光明而又善良的检察官哈维·丹特唯一的问题就是太过偏执,自从他毁容的那一刻起,自从那枚硬币的一面布满刮痕的那一刻起,他的冲动与决心最终酿成了大错。"
21         }
22     ]
23 }

相应js代码如下:

 1 var requestURL = 'https://detachmentdd.github.io/eastwood/movie.json';
 2 var request = new XMLHttpRequest();
 3 request.open('GET', requestURL);
 4 request.responseType = 'json';
 5 request.send();
 6 request.onload = function () {
 7     var inf = request.response;
 8     var img = {}
 9     img[0] = document.getElementsByClassName('p1')[0].getElementsByTagName('img')[0];
10     img[1] = document.getElementsByClassName('p2')[0].getElementsByTagName('img')[0];
11     img[2] = document.getElementsByClassName('p3')[0].getElementsByTagName('img')[0];
12     for (var i = 0; i < 3; i++) {
13         img[i].setAttribute('src', inf.mainactors[i].image);
14     }
15 
16 
17     var ch = {}
18     ch[0] = document.getElementById('ch0');
19     ch[1] = document.getElementById('ch1');
20     ch[2] = document.getElementById('ch2');
21 
22     for (var i = 0; i < 3; i++) {
23         ch[i].innerHTML = ch[i].innerHTML.replace('', inf.mainactors[i].character);
24     }
25 
26     var actor = {}
27     actor[0] = document.getElementsByClassName('a1')[0].getElementsByTagName('span')[0];
28     actor[1] = document.getElementsByClassName('a2')[0].getElementsByTagName('span')[0];
29     actor[2] = document.getElementsByClassName('a3')[0].getElementsByTagName('span')[0];
30     for (var i = 0; i < 3; i++) {
31         actor[i].innerHTML = actor[i].innerHTML.replace('', inf.mainactors[i].actor);
32     }
33 }

猜你喜欢

转载自www.cnblogs.com/jx937542655/p/10190703.html
my