AJax跨域请求百度音乐接口数据展示页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Music</title>
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 引入 Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<!--<link rel="stylesheet" type="text/css" href="../CSS/index.css">-->
</head>
<body>
<!-- **********************************View start********************************-->
<div>
<table class="table">
<thead>
<th>编号</th>
<th>歌曲名称</th>
<th>歌手</th>
<th>song_id</th>
<th>bitrate_fee</th>
<th>publishtime</th>
<th>pic_big</th>
<th>pic_small</th>
</thead>
<tbody>
</tbody>
</table>
<button id="btn">获取数据</button>
</div>
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous" id="prev">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a name="page1">1</a></li>
<li><a name="page2">2</a></li>
<li><a name="page3">3</a></li>
<li><a name="page4">4</a></li>
<li><a name="page5">5</a></li>
<li><a name="page6">6</a></li>
<li><a name="page7">7</a></li>
<li><a name="page8">8</a></li>
<li><a name="page9">9</a></li>
<li><a name="page10">10</a></li>
<li>
<a aria-label="Next" id="next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<!-- **********************************View end********************************-->
</body>
<script type="text/javascript"> var listData = new Array();
// **********************************Model start********************************
function musicModel() {
this.title = "";
this.songName = "";
this.songAuthor = "";
this.songId = "";
this.bitrate_fee = "";
this.publishtime = "";
this.pic_big = "";
this.pic_small = "";
this.number = 0; musicModel.prototype.getTitle = function() {
return this.title;
} musicModel.prototype.songName = function() {
return this.songName;
} musicModel.prototype.songAuthor = function() {
return this.songAuthor;
} musicModel.prototype.songId = function() {
return this.songId;
} musicModel.prototype.bitrate_fee = function() {
return this.bitrate_fee;
} musicModel.prototype.publishtime = function() {
return this.publishtime;
} musicModel.prototype.pic_big = function() {
return this.pic_big;
} musicModel.prototype.pic_small = function() {
return this.pic_small;
} musicModel.prototype.number = function() {
return this.number;
} musicModel.prototype.title = function(title) {
this.title = title;
} musicModel.prototype.songName = function(songName) {
this.songName = songName;
} musicModel.prototype.songAuthor = function(songAuthor) {
this.songAuthor = songAuthor;
} musicModel.prototype.songId = function(songId) {
this.songId = songId;
} musicModel.prototype.bitrate_fee = function(bitrate_fee) {
this.bitrate_fee = bitrate_fee;
} musicModel.prototype.publishtime = function(publishtime) {
this.publishtime = publishtime;
} musicModel.prototype.pic_big = function(pic_big) {
this.pic_big = pic_big;
} musicModel.prototype.pic_small = function(pic_small) {
this.pic_small = pic_small;
} musicModel.prototype.number = function(number) {
this.number = number;
}
}
// **********************************Model end******************************** // **********************************controller start********************************
//请求数据
function requestData(url){
$.ajax({
url:url,
dataType:"jsonp",
jsonp:"callback",
success:function(data){
getData(data);
}
});
}
//解析数据
function getData(data){
var songList = data["song_list"];
if(listData.length != 0){
listData.length = 0;
}
$.each(songList,function (i,v) {
var model = new musicModel();
model.number = i+1;
model.title = v["title"];
model.songAuthor =v["author"];
model.songId = v["song_id"];
model.bitrate_fee = v["bitrate_fee"];
model.publishtime = v["publishtime"];
model.pic_big = v["pic_big"];
model.pic_small = v["pic_small"];
listData.push(model);
})
//清除原来的数据
clearData();
//填充新的数据
setData();
}
//赋值
function setData(){
for(var i = 0;i < listData.length;i++) {
//添加行
$(".table").append("<tr id=option"+i+
"><td>"+listData[i].number+
"</td><td>"+listData[i].title+
"</td><td>"+listData[i].songAuthor+
"</td><td>"+listData[i].songId+
"</td><td>"+listData[i].bitrate_fee+
"</td><td>"+listData[i].publishtime+
"</td><td>"+listData[i].pic_big+
"</td><td>"+listData[i].pic_small+
+"</td>"+
"</tr>")
}
}
//删除行(清空旧数据)
function clearData(){
for(var i = 0;i < listData.length;i++){
$("#option"+i).remove();
}
}
//分页响应事件
function pageClick(name) {
console.log(name);
switch (name) {
case "page1":
{
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0");
}
break;
case "page2":
{
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=1");
}
break;
case "page3":
{
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=2");
}
break;
case "page4":
{
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=3");
}
break;
case "page5":
{
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=4");
}
break;
case "page6":
{
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=5");
}
break;
case "page7":
{
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=6");
}
break;
case "page8":
{
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=7");
}
break;
case "page9":
{
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=8");
}
break; case "page10":
{
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=9");
}
break;
}
}
// **********************************controller end********************************
//获取链接中的参数
function getUrlParam(url,name){
var pattern = new RegExp("[?&]" + name +"\=([^&]+)","g");
var matcher = pattern.exec(url);
var items = null;
if(matcher != null){
try{
items = decodeURIComponent(decodeURIComponent(matcher[1]));
}catch(e){
try{
items = decodeURIComponent(matcher[1]);
}catch(e){
items = matcher[1];
}
}
}
return items;
}
//加载页面
$(document).ready(function(){
var url = window.location; //加载数据
$("#btn").click(function(){
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0");
});
//分页处理<数字页数>
$("ul li a").click(function(){
var name = $(this).attr("name");
pageClick(name);
});
//实现上一页/下一页跳转
$("#prev").click(function(){
var currentPage = getUrlParam(url,"offset"); //获取当前页码
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset="+(parseInt(currentPage)-1).toString());
}); $("#next").click(function(){
var currentPage = getUrlParam(url,"offset"); //获取当前页码
console.log(currentPage);
requestData("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset="+(parseInt(currentPage)+1).toString());
}); }); </script>
</html>
AJax跨域请求百度音乐接口数据展示页面的更多相关文章
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- 【转】AJAX 跨域请求 - JSONP获取JSON数据
来源:http://justcoding.iteye.com/blog/1366102/ Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流 ...
- ajax跨域请求调用webservice接口
1.WebService 接口编写 步骤:新建web项目=>添加web service=>编写方法接口=>然后发布(本地测试可以直接把这个web service运行起来). 关键如何 ...
- 为什么返回的数据前面有callback？ ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题
为什么返回的数据前面有callback? 这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...
- 本地主机作服务器解决AJAX跨域请求访问数据的方法
近几天学到ajax,想测试一下ajax样例,由于之前在阿里租用的服务器过期了,于是想着让本地主机既做服务器又做客户端,只是简单地测试,应该还行. 于是,下载了xampp,下载网址http://www. ...
- Jquery DataTable AJAX跨域请求的解决方法及SSM框架下服务器端返回JSON格式数据的解决方法
如题,用HBuilder开发APP,涉及到用AJAX跨域请求后台数据,刚接触,费了不少时间.幸得高手指点,得以解决. APP需要用TABLE来显示数据,因此采用了JQ 的DataTable. 在实现 ...
- AJAX跨域请求json数据的实现方法
这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式, ...
- jQuery使用ajax跨域请求获取数据
jQuery使用ajax跨域请求获取数据 跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的 ...
- ajax跨域请求的解决方案
一直打算改造一下自己传统做网站的形式. 我是.Net程序员,含辛茹苦数年也没混出个什么名堂. 最近微信比较火, 由于现在大环境的影响和以前工作的总结和经验,我打算自己写一个数据,UI松耦合的比较新潮的 ...
随机推荐
- 类名.class与类名.this详解
类名.class 我们知道在java中,一个类在被加载的时候虚拟机就会自动的生成一个这个类的一个Class类型的“类对象”,每个类都对应着一个这样的类对象,通过这个Class类型的类对象,我 ...
- (转)战斗bug技巧全攻略
原文地址:http://www.cnblogs.com/manuosex/p/3736077.html 程序员不是有一幅这样的对联吗 上联:一个项目两部电脑三餐盒饭只为四千工资搞得五脏俱损六神无主仍然 ...
- 聊一聊 AngularJS 服务
什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 为什么使用服务? 在很多服务中,比如 $loca ...
- asp.net中常用的几种身份验证方式
转载:http://www.cnblogs.com/dinglang/archive/2012/06/03/2532664.html 前言 在B/S系统开发中,经常需要使用"身份验证&q ...
- Java_链表实现
http://blog.csdn.net/a19881029/article/details/22695289
- 查看Unix系统是32位还是64位
#getconf查看OS位数 以下经过测试了HP: getconf KERNEL_BITSLinux: getconf LONG_BITAIX: getconf KERNEL_BITMODE #AIX ...
- Mysql 冷备份批处理
@Rem Generate today date @echo wscript.echo dateadd("d",0,date)>GetOldDate.vbs @for /f ...
- ###学习《C++ Primer》- 2
点击查看Evernote原文. #@author: gr #@date: 2014-10-01 #@email: forgerui@gmail.com Part 2: STL顺序容器(第9章) 一.标 ...
- C#嵌套类型
1.什么是嵌套类型:在类和结构内部定义的类型称为嵌套类型,例如 class Container { class Nested { Nested() { } } } 2.不管外部类型是结构还是类.嵌套类 ...
- NOIP200701
题是这样的: 试题描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生都有3门课的成绩:语文.数学.英语.先按总分从高到低排序,如果两个同学总分相同,再 ...