我的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文件
<!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">
//创建需要插入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>

转载于:https://www.cnblogs.com/iillegal/p/10052380.html

前端页面导入json格式数据相关推荐

  1. 导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件

    导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件 参考文章: (1)导入数据任务(id:373985)异常, 错误信 ...

  2. 导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件...

    小程序导入,别人导出的数据库json文件,错误信息如下: 导入数据库失败, Error: Poll error, 导入数据任务(id:373985)异常,错误信息:解析导入文件错误,请检查导入文件内容 ...

  3. 前端传JSON格式数据给后端,将数据封装成JSON格式(@RequestBody注解)

    在前端开发过程中,碰到了后端要求前端提供JSON格式数据 如图所示,后端使用了@RequestBody注解. @RequestBody的作用其实是将json格式的数据转为java对象 因此需要我们前端 ...

  4. 使用jQuery发送POST,Ajax请求返回JSON格式数据

    问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...

  5. Python将JSON格式数据转换为SQL语句以便导入MySQL数据库

    前文中我们把网络爬虫爬取的数据保存为JSON格式,但为了能够更方便地处理数据.我们希望把这些数据导入到MySQL数据库中.phpMyadmin能够把MySQL数据库中的数据导出为JSON格式文件,但却 ...

  6. 在JSP页面中输出JSON格式数据

    JSON-taglib是一套使在JSP页面中输出JSON格式数据的标签库. JSON-taglib主页: http://json-taglib.sourceforge.net/index.html J ...

  7. ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

    本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...

  8. ajax调取mysql数据显示在html_jQuery+Ajax+js请求json格式数据并渲染到html页面

    json格式的数据文件有两种方式 一种是xxx.json文件 一种是xxx.php文件 前者是json格式的文件 后者是输出json格式的文件 前者是本地的文件 后者是获取数据库的数据再输出成json ...

  9. ASP.NET输出JSON格式数据

    最近在开发Windows8 Metro App,使用JavaScript和HTML开发环境.所以操作数据绑定都是使用JSON格式数据.后台使用的是ASP.NET,因为项目相对较小,所有后台没有使用数据 ...

最新文章

  1. 南大算法设计与分析课程OJ答案代码(5)--割点与桥和任务调度问题
  2. 推荐11个实用的JavaScript库
  3. idea 升级到2020后 无法启动_i.MXRT软复位后无法从32MB Flash启动?
  4. “埃尼阿克”背后的6个女孩
  5. 声明式事务控制的实现
  6. TCP IP基础知识的复习
  7. HTML 文件在PC移动端完美自适应布局的技巧
  8. leetcode 380. Insert Delete GetRandom O(1) | 380. O(1) 时间插入、删除和获取随机元素(Java)
  9. 编译php源码错误集与解决
  10. linux驱动私有数据,linux驱动开发之字符设备--私有数据和container_of
  11. java set 对象去重_JAVA对象去重
  12. c++ stack 遍历_python实现二叉树的遍历以及其他基本操作
  13. Data Analysis: What are the skills needed to become a data analyst?
  14. 移动APP怎样保存用户password
  15. 好看好用的花前月下网易云等级代挂程序(支持扫码登录)
  16. linux动态追踪神器——Strace实例介绍【转】
  17. MYSQL have_innodb DISABLED无法创建innodb类型的表
  18. 又遇到jqGrid在chrome下宽度不正常有滚动条
  19. css动画无限循环转圈,css实现无限循环
  20. 形式语言与自动机 第4章 正规文法和正规集的性质

热门文章

  1. 将Excel文件另存为制定格式的DBF-做了一半
  2. 五子棋——人机博弈(Java实现)
  3. 如何用adb 安装安卓测试包for mac
  4. vue —— 带农历的日历功能
  5. mysql主从复制及主机宕机的解决方法
  6. nginx配置https登录,同时支持wss协议
  7. 树莓派-SIM7600CE 4G部署(PPP拨号方式)
  8. 利用scrapy实现github登录
  9. 公共关系礼仪实务章节测试题——公共关系的类型(四)
  10. 不同档次的计算机配置,Win7显卡型号和电脑配置型号不一样怎么回事