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 }