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松耦合的比较新潮的 ...
随机推荐
- oracle 事务简介,锁的概念,java访问数据库注意事项
java链接oracle和连接其他数据库一样有两种方式:1 桥接 jdbc-obdc2 jbdc insert语句一次插入大量数据 insert into table (列1,列2,列3) selec ...
- 封装JDBC操作数据库的方法
自己动手封装java操作数据库的方法: 一:目录结构 二:所需依赖的第三方jar包 这里只需引入mysql-connector-java-5.1.8-bin.jar,mysql数据库驱动jar包 三: ...
- [记录]Ubuntu下，使用Shell，简单替换有规律的文件名称
因工作中需要将Flash转为Html5,并且要有动画效果,我将Flash的组件导出Png序列,然后将Png序列拼接成一张雪碧图(Sprite),名字为在生成雪碧图可以排序,需要改成数字名称. 而名字是 ...
- ThinkPHP的配置
ThinkPHP配置:conf目录下 'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符, 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TM ...
- Linux - 查看系统的版本信息
在 Linux 中,有多种方法可以查看系统的版本信息. uname 命令 huey@huey-K42JE:~$ uname -a Linux huey-K42JE 3.5.0-43-generic # ...
- SpringMVC使用@ResponseBody注解返回中文字符串乱码的问题
先说一下我的经历,以及解决问题的而过程. 在使用SpringMVC的时候,最开始的时候在配置文件中使用<mvc:annotation-driven />去自动注册DefaultAnnota ...
- Cordova+angularjs+ionic+vs2015开发（五）
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideM ...
- TD(TestDirector 8.0)在win7 ie8下无法用的解决方案：
1.输入uac进入个人账户管理控制 选择最低 重启 2.以管理员身份进入cmd,执行脚本:bcdedit /set {current} nx AlwaysOff 重启
- hdu 1715 大菲波数(高精度数)
Problem Description Fibonacci数列,定义如下: f(1)=f(2)=1 f(n)=f(n-1)+f(n-2) n>=3. 计算第n项Fibonacci数值. Inpu ...
- 生产项目加入到SVN版本控制
零.介绍 每天定时备份是通过ftp打包和同步的方式,这些都是比较粗的备份,没法恢复到指定时间的文件,所以需要用到svn控制版本. (请不要问我为什么不用git) 一.现有项目文件加入版本控制 因为项目 ...