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

一、接口返回数据（json数据）

1. { 
2.     "name": "电视剧", 
3.     "data": [ 
4.         { 
5.             "title": "忘忧酒馆", 
6.             "href": "", 
7.             "url": "" 
8.         }, 
9.         { 
10.             "title": "九丹", 
11.             "href": "", 
12.             "url": "" 
13.         }, 
14.         { 
15.             "title": "上海女子图鉴", 
16.             "href": "", 
17.             "url": "" 
18.         }, 
19.         { 
20.             "title": "楼外楼", 
21.             "href": "", 
22.             "url": "" 
23.         }, 
24.         { 
25.             "title": "哦!我的皇帝陛下", 
26.             "href": "", 
27.             "url": "" 
28.         } 
29.     ] 
30. } 

二、前端HTML代码

1.  
2.  
3.  
4. "UTF-8"> 
5.  
6. "text/javascript" src="jquery.js"> 
7. "text/css"> 
8. * { 
9.     padding:0px; 
10.     marign:0px; 
11. } 
12. ul, li { 
13.     list-style: none; 
14. } 
15. body { 
16.     min-width:1200px; 
17.     color: #333; 
18.     font-size: 14px; 
19.     font-family:"Microsoft YaHei"; 
20.     text-align: center; 
21.     background-color:#ededed; 
22. } 
23. a { 
24.     color: #333; 
25.     text-decoration: none; 
26.     outline: none; 
27. } 
28. a:hover { 
29.     color: #e00; 
30. } 
31. #box { 
32.     width: 660px; 
33.     margin: 0 auto; 
34. } 
35. #box li { 
36.     width:180px; 
37.     height:300px; 
38.     float:left; 
39.     margin-left:10px; 
40.     margin-right:10px; 
41.     background-color:#fff; 
42.     padding:10px; 
43.     line-height:30px; 
44.     margin-bottom:20px; 
45. } 
46. #box li .pic a { 
47.     height:235px; 
48.     overflow:hidden; 
49.     display:block; 
50. } 
51. #box li img { 
52.     width: 100%; 
53.     max-width:100%; 
54. } 
55.  
56.  
57.  
58.  
59. "box"> 
60.   
     
61.  
62.  
63.  

三、输出结果