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>
时间： 2024-10-12 23:38:24