zoukankan html css js c++ java
AJax跨域请求百度音乐接口数据展示页面

  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 <!--    **********************************View start********************************-->
 13 <div>
 14     <table class="table">
 15         <thead>
 16             <th>编号</th>
 17             <th>歌曲名称</th>
 18             <th>歌手</th>
 19             <th>song_id</th>
 20             <th>bitrate_fee</th>
 21             <th>publishtime</th>
 22             <th>pic_big</th>
 23             <th>pic_small</th>
 24         </thead>
 25         <tbody>
 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" id="prev">
 34                 <span aria-hidden="true">&laquo;</span>
 35             </a>
 36         </li>
 37         <li><a name="page1">1</a></li>
 38         <li><a name="page2">2</a></li>
 39         <li><a name="page3">3</a></li>
 40         <li><a name="page4">4</a></li>
 41         <li><a name="page5">5</a></li>
 42         <li><a name="page6">6</a></li>
 43         <li><a name="page7">7</a></li>
 44         <li><a name="page8">8</a></li>
 45         <li><a name="page9">9</a></li>
 46         <li><a name="page10">10</a></li>
 47         <li>
 48             <a aria-label="Next" id="next">
 49                 <span aria-hidden="true">&raquo;</span>
 50             </a>
 51         </li>
 52     </ul>
 53 </nav>
 54 <!--    **********************************View end********************************-->
 55 </body>
 56 <script type="text/javascript">
 57 
 58     var listData = new Array();
 59 //    **********************************Model start********************************
 60     function musicModel() {
 61         this.title = "";
 62         this.songName = "";
 63         this.songAuthor = "";
 64         this.songId = "";
 65         this.bitrate_fee = "";
 66         this.publishtime = "";
 67         this.pic_big = "";
 68         this.pic_small = "";
 69         this.number = 0;
 70 
 71         musicModel.prototype.getTitle = function() {
 72             return this.title;
 73         }
 74 
 75         musicModel.prototype.songName = function() {
 76             return this.songName;
 77         }
 78 
 79         musicModel.prototype.songAuthor = function() {
 80             return this.songAuthor;
 81         }
 82 
 83         musicModel.prototype.songId = function() {
 84             return this.songId;
 85         }
 86 
 87         musicModel.prototype.bitrate_fee = function() {
 88             return this.bitrate_fee;
 89         }
 90 
 91         musicModel.prototype.publishtime = function() {
 92             return this.publishtime;
 93         }
 94 
 95         musicModel.prototype.pic_big = function() {
 96             return this.pic_big;
 97         }
 98 
 99         musicModel.prototype.pic_small = function() {
100             return this.pic_small;
101         }
102 
103         musicModel.prototype.number = function() {
104             return this.number;
105         }
106 
107         musicModel.prototype.title = function(title) {
108             this.title = title;
109         }
110 
111         musicModel.prototype.songName = function(songName) {
112             this.songName = songName;
113         }
114 
115         musicModel.prototype.songAuthor = function(songAuthor) {
116             this.songAuthor = songAuthor;
117         }
118 
119         musicModel.prototype.songId = function(songId) {
120             this.songId = songId;
121         }
122 
123         musicModel.prototype.bitrate_fee = function(bitrate_fee) {
124             this.bitrate_fee = bitrate_fee;
125         }
126 
127         musicModel.prototype.publishtime = function(publishtime) {
128             this.publishtime = publishtime;
129         }
130 
131         musicModel.prototype.pic_big = function(pic_big) {
132             this.pic_big = pic_big;
133         }
134 
135         musicModel.prototype.pic_small = function(pic_small) {
136             this.pic_small = pic_small;
137         }
138 
139         musicModel.prototype.number = function(number) {
140             this.number = number;
141         }
142     }
143 //    **********************************Model end********************************
144 
145 //    **********************************controller start********************************
146     //请求数据
147     function requestData(url){
148         $.ajax({
149             url:url,
150             dataType:"jsonp",
151             jsonp:"callback",
152             success:function(data){
153                 getData(data);
154             }
155         });
156     }
157     //解析数据
158     function getData(data){
159         var songList = data["song_list"];
160         if(listData.length != 0){
161             listData.length = 0;
162         }
163         $.each(songList,function (i,v) {
164             var model = new musicModel();
165             model.number = i+1;
166             model.title = v["title"];
167             model.songAuthor =v["author"];
168             model.songId = v["song_id"];
169             model.bitrate_fee = v["bitrate_fee"];
170             model.publishtime = v["publishtime"];
171             model.pic_big = v["pic_big"];
172             model.pic_small = v["pic_small"];
173             listData.push(model);
174         })
175         //清除原来的数据
176         clearData();
177         //填充新的数据
178         setData();
179     }
180     //赋值
181     function setData(){
182     for(var  i = 0;i < listData.length;i++) {
183         //添加行
184         $(".table").append("<tr id=option"+i+
185         "><td>"+listData[i].number+
186         "</td><td>"+listData[i].title+
187         "</td><td>"+listData[i].songAuthor+
188         "</td><td>"+listData[i].songId+
189         "</td><td>"+listData[i].bitrate_fee+
190         "</td><td>"+listData[i].publishtime+
191         "</td><td>"+listData[i].pic_big+
192         "</td><td>"+listData[i].pic_small+
193         +"</td>"+
194         "</tr>")
195     }
196 }
197     //删除行(清空旧数据)
198     function clearData(){
199         for(var  i = 0;i < listData.length;i++){
200             $("#option"+i).remove();
201         }
202     }
203     //分页响应事件
204     function pageClick(name) {
205         console.log(name);
206         switch (name) {
207             case "page1":
208             {
209                 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0");
210             }
211                 break;
212             case "page2":
213             {
214                 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=1");
215             }
216                 break;
217             case "page3":
218             {
219                 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=2");
220             }
221                 break;
222             case "page4":
223             {
224                 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=3");
225             }
226                 break;
227             case "page5":
228             {
229                 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=4");
230             }
231                 break;
232             case "page6":
233             {
234                 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=5");
235             }
236             break;
237             case "page7":
238             {
239                 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=6");
240             }
241             break;
242             case "page8":
243             {
244                 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=7");
245             }
246                 break;
247             case "page9":
248             {
249                 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=8");
250             }
251                 break;
252 
253             case "page10":
254             {
255                 requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=9");
256             }
257                 break;
258         }
259     }
260 //    **********************************controller end********************************
261     //获取链接中的参数
262     function getUrlParam(url,name){
263         var pattern = new RegExp("[?&]" + name +"=([^&]+)","g");
264         var matcher = pattern.exec(url);
265         var items = null;
266         if(matcher != null){
267             try{
268                 items = decodeURIComponent(decodeURIComponent(matcher[1]));
269             }catch(e){
270                 try{
271                     items = decodeURIComponent(matcher[1]);
272                 }catch(e){
273                     items = matcher[1];
274                 }
275             }
276         }
277         return items;
278     }
279     //加载页面
280     $(document).ready(function(){
281         var url = window.location;
282 
283         //加载数据
284         $("#btn").click(function(){
285          requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0");
286         });
287         //分页处理<数字页数>
288         $("ul li a").click(function(){
289             var name = $(this).attr("name");
290             pageClick(name);
291         });
292         //实现上一页/下一页跳转
293         $("#prev").click(function(){
294             var currentPage = getUrlParam(url,"offset"); //获取当前页码
295             requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset="+(parseInt(currentPage)-1).toString());
296         });
297 
298         $("#next").click(function(){
299             var currentPage = getUrlParam(url,"offset"); //获取当前页码
300             console.log(currentPage);
301             requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset="+(parseInt(currentPage)+1).toString());
302         });
303 
304     });
305 
306 </script>
307 </html>
查看全文
相关阅读:
01-helloworld
F2. Nearest Beautiful Number (hard version) （思维+分类讨论+枚举）
CF1559 D2. Mocha and Diana (Hard Version)
牛客小白月赛36——全部施工完毕
 [P4735] 最大异或和——可持久化trie + 思维
 CF1322B Present（思维 + 位运算 + 双指针 + 枚举）
牛客每日一题SCI2005扫雷
 一些没见过的dp模型
 思维训练——CF1304E 1-Trees and Queries
思维训练——CF1292B Aroma's Search
原文地址：https://www.cnblogs.com/jiechen/p/5658822.html