我的json文件放在github的仓库里。
json文件
{
"major":
[
{
"name":"纪伯伦全集 ",
"author":" [黎巴嫩] 纪伯伦 ",
"intro":"这套全集收入了纪伯伦的全部小说、诗歌、散文和绘画作品。 纪伯伦·哈利勒·纪伯伦是阿拉伯著名的作家、诗人、艺术家。 纪伯伦创作的全部作品，充满了对祖国、对人民和对未来的爱，以画笔和文笔为武器同旧世界进行了顽强的斗争，保护了受压迫最深的阿拉伯妇女，捍卫了她们的自由恋爱的权利。",
"price":"$100"
},
{
"name":"唐诗宋词",
"author":"宋涛",
"intro":"唐诗宋词是中国文学史上的两颗明珠，唐代被称为诗的时代，宋代被称为词的时代。在中华文明灿烂的长卷中，唐诗宋词是其中最为绚丽的华章。词源于民间，始于唐，兴于五代，盛于两宋。",
"price":"$150"
},
{
"name":"嫌疑人X的献身",
"author":"东野圭吾",
"intro":"百年一遇的数学天才石神，每天唯一的乐趣，便是去固定的便当店买午餐，只为看一眼在便当店做事的邻居靖子。靖子与女儿相依为命，失手杀了前来纠缠的前夫。石神提出由他料理善后。石神设了一个匪夷所思的局，令警方始终只能在外围敲敲打打，根本无法与案子沾边。石神究竟使用了什么手法？",
"price":"$73"
}
],
"hot":
[
{
"name":"嫌疑人X的献身",
"author":"东野圭吾",
"intro":"百年一遇的数学天才石神，每天唯一的乐趣，便是去固定的便当店买午餐，只为看一眼在便当店做事的邻居靖子。靖子与女儿相依为命，失手杀了前来纠缠的前夫。石神提出由他料理善后。石神设了一个匪夷所思的局，令警方始终只能在外围敲敲打打，根本无法与案子沾边。石神究竟使用了什么手法？",
"price":"$73",
"number":"10815014"
},
{
"name":"恶意",
"author":"东野圭吾",
"intro":"《恶意》是日本作家东野圭吾挑战悬疑小说写作极限的佳作，是以加贺恭一郎为主人公的系列作品的第四部，该系列的上一部作品是《谁杀了她》，该系列的下一部作品是《我杀了他》。",
"price":"$53",
"number":"5156552"
},
{
"name":"我不",
"author":"大冰",
"intro":"《我不》——百万级畅销书作家大冰2017年新书。这本书是一本在北冰洋开笔的故事集，故事中的人物全都是真实存在的，他们因为各种交集而和大冰遇见，相识于微，因为故事成为了没有血缘关系的家人，相识之地，成为了不是家乡的故乡。他们的故事不虚构，不矫情，不鸡汤，只是把多年积淀的故事娓娓道来。",
"price":"$123",
"number":"87185425"
}
],
"new":
[
{
"name":"好好说话. 2简单有效的高情商沟通术",
"author":"马薇薇、黄执中、周玄毅、邱晨、胡渐彪",
"price":"$50",
"time":"2018-10-01"
},
{
"name":"人生难得是心安",
"author":"呂克·费希",
"price":"$50",
"time":"2016-03-01"
},
{
"name":"实用折纸大全",
"author":"犀文图书",
"price":"$60",
"time":"2014-04-01"
},
{
"name":"绿山墙的安妮",
"author":"露西·莫德·蒙格马利",
"price":"$160",
"time":"2011-5-1"
},
{
"name":"活着",
"author":"余华",
"price":"$40",
"time":"1993-03-01"
},
{
"name":"幼儿故事绘本",
"author":"犀文图书",
"price":"$130",
"time":"2018-04-06"
}
],
"major":
[
{
"name":"纪伯伦全集 ",
"author":" [黎巴嫩] 纪伯伦 ",
"intro":"这套全集收入了纪伯伦的全部小说、诗歌、散文和绘画作品。 纪伯伦·哈利勒·纪伯伦是阿拉伯著名的作家、诗人、艺术家。 纪伯伦创作的全部作品，充满了对祖国、对人民和对未来的爱，以画笔和文笔为武器同旧世界进行了顽强的斗争，保护了受压迫最深的阿拉伯妇女，捍卫了她们的自由恋爱的权利。",
"price":"$100"
},
{
"name":"唐诗宋词",
"author":"宋涛",
"intro":"唐诗宋词是中国文学史上的两颗明珠，唐代被称为诗的时代，宋代被称为词的时代。在中华文明灿烂的长卷中，唐诗宋词是其中最为绚丽的华章。词源于民间，始于唐，兴于五代，盛于两宋。",
"price":"$150"
},
{
"name":"嫌疑人X的献身",
"author":"东野圭吾",
"intro":"百年一遇的数学天才石神，每天唯一的乐趣，便是去固定的便当店买午餐，只为看一眼在便当店做事的邻居靖子。靖子与女儿相依为命，失手杀了前来纠缠的前夫。石神提出由他料理善后。石神设了一个匪夷所思的局，令警方始终只能在外围敲敲打打，根本无法与案子沾边。石神究竟使用了什么手法？",
"price":"$73"
}
],
"hot":
[
{
"name":"嫌疑人X的献身",
"author":"东野圭吾",
"intro":"百年一遇的数学天才石神，每天唯一的乐趣，便是去固定的便当店买午餐，只为看一眼在便当店做事的邻居靖子。靖子与女儿相依为命，失手杀了前来纠缠的前夫。石神提出由他料理善后。石神设了一个匪夷所思的局，令警方始终只能在外围敲敲打打，根本无法与案子沾边。石神究竟使用了什么手法？",
"price":"$73",
"number":"10815014"
},
{
"name":"恶意",
"author":"东野圭吾",
"intro":"《恶意》是日本作家东野圭吾挑战悬疑小说写作极限的佳作，是以加贺恭一郎为主人公的系列作品的第四部，该系列的上一部作品是《谁杀了她》，该系列的下一部作品是《我杀了他》。",
"price":"$53",
"number":"5156552"
},
{
"name":"我不",
"author":"大冰",
"intro":"《我不》——百万级畅销书作家大冰2017年新书。这本书是一本在北冰洋开笔的故事集，故事中的人物全都是真实存在的，他们因为各种交集而和大冰遇见，相识于微，因为故事成为了没有血缘关系的家人，相识之地，成为了不是家乡的故乡。他们的故事不虚构，不矫情，不鸡汤，只是把多年积淀的故事娓娓道来。",
"price":"$123",
"number":"87185425"
}
],
"new":
[
{
"name":"好好说话. 2简单有效的高情商沟通术",
"author":"马薇薇、黄执中、周玄毅、邱晨、胡渐彪",
"price":"$50",
"time":"2018-10-01"
},
{
"name":"人生难得是心安",
"author":"呂克·费希",
"price":"$50",
"time":"2016-03-01"
},
{
"name":"实用折纸大全",
"author":"犀文图书",
"price":"$60",
"time":"2014-04-01"
},
{
"name":"绿山墙的安妮",
"author":"露西·莫德·蒙格马利",
"price":"$160",
"time":"2011-5-1"
},
{
"name":"活着",
"author":"余华",
"price":"$40",
"time":"1993-03-01"
},
{
"name":"幼儿故事绘本",
"author":"犀文图书",
"price":"$130",
"time":"2018-04-06"
}
],
"discount":
[
{
"name":"新华字典",
"author":"",
"Oprice":"100",
"price":"79"
},
{
"name":"湘军史",
"author":"",
"Oprice":"99",
"price":"49"
},
{
"name":"",
"author":"",
"Oprice":"",
"price":""
}
[
{
"name":"新华字典",
"author":"",
"Oprice":"100",
"price":"79"
},
{
"name":"湘军史",
"author":"",
"Oprice":"99",
"price":"49"
},
{
"name":"",
"author":"",
"Oprice":"",
"price":""
}
]
}
}
-------------------------------------------------------------------------------------------------------------------------
html文件
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/1.css">
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<td>
<a href="">
<img src="../scr/book1.jpg">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../css/1.css">
<meta charset="utf-8">
</head>
<body>
<table>
<tr>
<td>
<a href="">
<img src="../scr/book1.jpg">
//创建需要插入json数据的列表
<ul>
<li id="b1_l1">
</li>
<li id="b1_l2">
</li>
<li id="b1_l3"></li>
</ul>
</a>
</td>
<td>
<a href="">
<img src="../scr/book2.jpg">
<ul>
<li id="b2_l1">
</li>
<li id="b2_l2">
</li>
<li id="b2_l3"></li>
</ul>
</a>
</td>
<td>
<a href="">
<img src="../scr/book3.jpg">
<ul>
<li id="b3_l1">
</li>
<li id="b3_l2">
</li>
<li id="b3_l3"></li>
</ul>
</a>
</td>
</tr>
</table>
<script>
<ul>
<li id="b1_l1">
</li>
<li id="b1_l2">
</li>
<li id="b1_l3"></li>
</ul>
</a>
</td>
<td>
<a href="">
<img src="../scr/book2.jpg">
<ul>
<li id="b2_l1">
</li>
<li id="b2_l2">
</li>
<li id="b2_l3"></li>
</ul>
</a>
</td>
<td>
<a href="">
<img src="../scr/book3.jpg">
<ul>
<li id="b3_l1">
</li>
<li id="b3_l2">
</li>
<li id="b3_l3"></li>
</ul>
</a>
</td>
</tr>
</table>
<script>
//发送请求json文件
var requestURL = 'https://iilleagl.github.io/ccc/book.json'; //json存放的url
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
var requestURL = 'https://iilleagl.github.io/ccc/book.json'; //json存放的url
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var bookinfo = request.response;
var book1_info = bookinfo['major'];
var book1_info = bookinfo['major'];
//将图书1的信息插入导入图书1的列表中
var name_0 = document.getElementById('b1_l1');
var author_0 = document.getElementById("b1_l2");
var info_0 = document.getElementById("b1_l3");
name_0.textContent = '书名:'+ bookinfo['major'][0].name;
author_0.textContent='作者:'+bookinfo['major'][0].author;
info_0.textContent=bookinfo['major'][0].intro;
var author_0 = document.getElementById("b1_l2");
var info_0 = document.getElementById("b1_l3");
name_0.textContent = '书名:'+ bookinfo['major'][0].name;
author_0.textContent='作者:'+bookinfo['major'][0].author;
info_0.textContent=bookinfo['major'][0].intro;
var name_1 = document.getElementById('b2_l1');
var author_1 = document.getElementById("b2_l2");
var info_1 = document.getElementById("b2_l3");
name_1.textContent = '书名:'+ bookinfo['major'][1].name;
author_1.textContent='作者:'+bookinfo['major'][1].author;
info_1.textContent=bookinfo['major'][1].intro;
var author_1 = document.getElementById("b2_l2");
var info_1 = document.getElementById("b2_l3");
name_1.textContent = '书名:'+ bookinfo['major'][1].name;
author_1.textContent='作者:'+bookinfo['major'][1].author;
info_1.textContent=bookinfo['major'][1].intro;
var name_2 = document.getElementById('b3_l1');
var author_2 = document.getElementById("b3_l2");
var info_2 = document.getElementById("b3_l3");
name_2.textContent = '书名:'+ bookinfo['major'][2].name;
author_2.textContent='作者:'+bookinfo['major'][2].author;
info_2.textContent=bookinfo['major'][2].intro;
var author_2 = document.getElementById("b3_l2");
var info_2 = document.getElementById("b3_l3");
name_2.textContent = '书名:'+ bookinfo['major'][2].name;
author_2.textContent='作者:'+bookinfo['major'][2].author;
info_2.textContent=bookinfo['major'][2].intro;
}
</script>
</body>
</html>
</script>
</body>
</html>