标签：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Music</title> 6 <script src="https://code.jquery.com/jquery.js"></script> 7 <!-- 引入 Bootstrap --> 8 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> 9 <link rel="stylesheet" type="text/css" href="../CSS/index.css"> 10 </head> 11 <body> 12 <div> 13 <table class="table"> 14 <thead> 15 <th>编号</th> 16 <th>歌曲名称</th> 17 <th>歌手</th> 18 <th>song_id</th> 19 <th>bitrate_fee</th> 20 <th>publishtime</th> 21 <th>pic_big</th> 22 <th>pic_small</th> 23 </thead> 24 <tbody> 25 26 </tbody> 27 </table> 28 <button id="btn">获取数据</button> 29 </div> 30 <nav> 31 <ul class="pagination"> 32 <li> 33 <a href="#" aria-label="Previous"> 34 <span aria-hidden="true">«</span> 35 </a> 36 </li> 37 <li><a href="requestData(http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0)">1</a></li> 38 <li><a href="requestData(http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=1)">2</a></li> 39 <li><a href="requestData(http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=2)">3</a></li> 40 <li><a href="requestData(http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=3)">4</a></li> 41 <li><a href="requestData(http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=4)">5</a></li> 42 <li><a href="requestData(http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=5)">6</a></li> 43 <li><a href="requestData(http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=6)">7</a></li> 44 <li><a href="requestData(http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=7)">8</a></li> 45 <li><a href="requestData(http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=8)">9</a></li> 46 <li><a href="requestData(http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=9)">10</a></li> 47 <li> 48 <a href="#" aria-label="Next"> 49 <span aria-hidden="true">»</span> 50 </a> 51 </li> 52 </ul> 53 </nav> 54 55 </body> 56 <script> 57 //请求数据 58 function requestData(url){ 59 $.ajax({ 60 url:url, 61 dataType:"jsonp", 62 jsonp:"callback", 63 success:function(data){ 64 getData(data); 65 } 66 }); 67 } 68 function getData(data){ 69 var songList = data["song_list"]; 70 $.each(songList,function (i,v) { 71 var songName = v["title"]; 72 var songAuthor =v["author"]; 73 var songId = v["song_id"]; 74 var bitrate_fee = v["bitrate_fee"]; 75 var publishtime = v["publishtime"]; 76 var pic_big = v["pic_big"]; 77 var pic_small = v["pic_small"]; 78 $(".table").append("<tr>"+ 79 "<td>"+(i+1)+ 80 "</td><td>"+songName+ 81 "</td><td>"+songAuthor+ 82 "</td><td>"+songId+ 83 "</td><td>"+bitrate_fee+ 84 "</td><td>"+publishtime+ 85 "</td><td>"+pic_big+ 86 "</td><td>"+pic_small+ 87 +"</td>"+ 88 "</tr>") 89 90 }) 91 } 92 $(document).ready(function(){ 93 $("#btn").click(function(){ 94 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0"); 95 }); 96 }); 97 98 </script> 99 </html>
标签：
原文地址：http://www.cnblogs.com/jiechen/p/5658822.html
