前端页面导入json格式数据
我的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"
}
],
[
{
"name":"新华字典",
"author":"",
"Oprice":"100",
"price":"79"
},
{
"name":"湘军史",
"author":"",
"Oprice":"99",
"price":"49"
},
{
"name":"",
"author":"",
"Oprice":"",
"price":""
}
}
<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">
<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>
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 book1_info = bookinfo['major'];
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_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_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>
转载于:https://www.cnblogs.com/iillegal/p/10052380.html
前端页面导入json格式数据相关推荐
- 导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件
导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件 参考文章: (1)导入数据任务(id:373985)异常, 错误信 ...
- 导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件...
小程序导入,别人导出的数据库json文件,错误信息如下: 导入数据库失败, Error: Poll error, 导入数据任务(id:373985)异常,错误信息:解析导入文件错误,请检查导入文件内容 ...
- 前端传JSON格式数据给后端,将数据封装成JSON格式(@RequestBody注解)
在前端开发过程中,碰到了后端要求前端提供JSON格式数据 如图所示,后端使用了@RequestBody注解. @RequestBody的作用其实是将json格式的数据转为java对象 因此需要我们前端 ...
- 使用jQuery发送POST,Ajax请求返回JSON格式数据
问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...
- Python将JSON格式数据转换为SQL语句以便导入MySQL数据库
前文中我们把网络爬虫爬取的数据保存为JSON格式,但为了能够更方便地处理数据.我们希望把这些数据导入到MySQL数据库中.phpMyadmin能够把MySQL数据库中的数据导出为JSON格式文件,但却 ...
- 在JSP页面中输出JSON格式数据
JSON-taglib是一套使在JSP页面中输出JSON格式数据的标签库. JSON-taglib主页: http://json-taglib.sourceforge.net/index.html J ...
- ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...
- ajax调取mysql数据显示在html_jQuery+Ajax+js请求json格式数据并渲染到html页面
json格式的数据文件有两种方式 一种是xxx.json文件 一种是xxx.php文件 前者是json格式的文件 后者是输出json格式的文件 前者是本地的文件 后者是获取数据库的数据再输出成json ...
- ASP.NET输出JSON格式数据
最近在开发Windows8 Metro App,使用JavaScript和HTML开发环境.所以操作数据绑定都是使用JSON格式数据.后台使用的是ASP.NET,因为项目相对较小,所有后台没有使用数据 ...
最新文章
- 南大算法设计与分析课程OJ答案代码(5)--割点与桥和任务调度问题
- 推荐11个实用的JavaScript库
- idea 升级到2020后 无法启动_i.MXRT软复位后无法从32MB Flash启动?
- “埃尼阿克”背后的6个女孩
- 声明式事务控制的实现
- TCP IP基础知识的复习
- HTML 文件在PC移动端完美自适应布局的技巧
- leetcode 380. Insert Delete GetRandom O(1) | 380. O(1) 时间插入、删除和获取随机元素(Java)
- 编译php源码错误集与解决
- linux驱动私有数据,linux驱动开发之字符设备--私有数据和container_of
- java set 对象去重_JAVA对象去重
- c++ stack 遍历_python实现二叉树的遍历以及其他基本操作
- Data Analysis: What are the skills needed to become a data analyst?
- 移动APP怎样保存用户password
- 好看好用的花前月下网易云等级代挂程序(支持扫码登录)
- linux动态追踪神器——Strace实例介绍【转】
- MYSQL have_innodb DISABLED无法创建innodb类型的表
- 又遇到jqGrid在chrome下宽度不正常有滚动条
- css动画无限循环转圈,css实现无限循环
- 形式语言与自动机 第4章 正规文法和正规集的性质