您的位置:首页> 日志> 前端技术 正文
DTOP

简单的数据接口调用显示

chenke | 2018年05月31日 |

>>收藏本文 已有 0条评论

项目中涉及到外部数据的显示,往往都是通过接口来实现的,下面以简单的列子简要的阐述一下怎么通过前端来实现接口数据的调用:

一、接口返回数据(json数据)

  1.     "name": "电视剧", 
  2.     "data": [ 
  3.         { 
  4.             "title": "忘忧酒馆", 
  5.             "href": "http://v.baidu.com/tv/27057.htm?frp=browse", 
  6.             "url": "http://t2.baidu.com/it/u=1686649976,874824953&fm=20" 
  7.         }, 
  8.         { 
  9.             "title": "九丹", 
  10.             "href": "http://v.baidu.com/tv/20428.htm?frp=browse", 
  11.             "url": "http://vorcdn.xiaodutv.com/46d0262e2591c48074aa8e7b082cda33" 
  12.         }, 
  13.         { 
  14.             "title": "上海女子图鉴", 
  15.             "href": "http://v.baidu.com/tv/27712.htm?frp=browse", 
  16.             "url": "http://t3.baidu.com/it/u=3455637920,2452886874&fm=20" 
  17.         }, 
  18.         { 
  19.             "title": "楼外楼", 
  20.             "href": "http://v.baidu.com/tv/27735.htm?frp=browse", 
  21.             "url": "http://t2.baidu.com/it/u=451441698,3467368570&fm=20" 
  22.         }, 
  23.         { 
  24.             "title": "哦!我的皇帝陛下", 
  25.             "href": "http://v.baidu.com/tv/27749.htm?frp=browse", 
  26.             "url": "http://t3.baidu.com/it/u=2210381893,1610260468&fm=20" 
  27.         } 
  28.     ] 

二、前端HTML代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="UTF-8"
  5. <title>获取数据</title> 
  6. <script type="text/javascript" src="jquery.js"></script> 
  7. <style type="text/css"
  8. * { 
  9.     padding:0px; 
  10.     marign:0px; 
  11. ul, li { 
  12.     list-style: none; 
  13. body { 
  14.     min-width:1200px; 
  15.     color: #333; 
  16.     font-size: 14px; 
  17.     font-family:"Microsoft YaHei"
  18.     text-align: center; 
  19.     background-color:#ededed; 
  20. a { 
  21.     color: #333; 
  22.     text-decoration: none; 
  23.     outline: none; 
  24. a:hover { 
  25.     color: #e00; 
  26. #box { 
  27.     width: 660px; 
  28.     margin: 0 auto; 
  29. #box li { 
  30.     width:180px; 
  31.     height:300px; 
  32.     float:left; 
  33.     margin-left:10px; 
  34.     margin-right:10px; 
  35.     background-color:#fff; 
  36.     padding:10px; 
  37.     line-height:30px; 
  38.     margin-bottom:20px; 
  39. #box li .pic a { 
  40.     height:235px; 
  41.     overflow:hidden; 
  42.     display:block; 
  43. #box li img { 
  44.     width: 100%; 
  45.     max-width:100%; 
  46. </style> 
  47. <script>     
  48.         $(function(){        
  49.             $.ajax({ 
  50.                 type: "post"
  51.                 url: "video.json", //替换成接口地址
  52.                 dataType: "json",                
  53.          success: function(data){                     
  54.                    geInfo(data);                     
  55.                 }    
  56.             });          
  57.         }); 
  58.         function geInfo(data){    
  59.             var data=data['data'];            
  60.             $.each(data,function(i,o){             
  61.                 $("#box ul").append(                 
  62.                 "<li class='li"+i+"'>"
  63.                     "<div class='pic'><a href="+o['href']+" target='_blank'>"+"<img class='img' src="+o['url']+"></a></div>"+                     
  64.                     "<h3><a href="+o['href']+" target='_blank'>"+o['title']+"</a></h3>"+  
  65.                 "</li>" 
  66.                 ); 
  67.             }); 
  68.         } 
  69. </script> 
  70. </head> 
  71. <body> 
  72. <div id="box"
  73.   <ul></ul> 
  74. </div> 
  75. </body> 
  76. </html> 

三、输出结果