前端頁面導入json格式數據
阿新 • • 發佈：2018-12-02
ont 格式 tro 沒有 溝通 數學 都是 著名 愛的
"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":""
} ]
} ------------------------------------------------------------------------------------------------------------------------- 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"> //創建需要插入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> //發送請求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(); request.onload = function() { var bookinfo = request.response;
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 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 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; }
</script>
</body>
</html>
我的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"
}
], "discount":
[
{
"name":"新華字典",
"author":"",
"Oprice":"100",
"price":"79"
},
{
"name":"湘軍史",
"author":"",
"Oprice":"99",
"price":"49"
},
{
"name":"",
"author":"",
"Oprice":"",
"price":""
} ]
} ------------------------------------------------------------------------------------------------------------------------- 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"> //創建需要插入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> //發送請求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(); request.onload = function() { var bookinfo = request.response;
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 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 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; }
</script>
</body>
</html>
前端頁面導入json格式數據