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松耦合的比较新潮的 ...
随机推荐
- 从svn上down下来的版本在本机启动时各种问题
大姨妈来的时候人比较暴躁,险些摔了我的电脑,还好疼痛及时,没有力气了. 昨天刚从svn上down下来的项目源码,一开始就各种报错. 1,pom.xml文件错误, maven仓库中添加插件就好了 2.服 ...
- Linux系统上安装软件(ftp服务器)
一:安装ftp服务器 在安装linux系统的时候,自定义软件包安装时,我已经勾选了ftp服务器,所以已经 安装过了,如果没有勾选,需要额外下载ftp的安装包,进行安装. ftp服务器搭建过程中遇到的问 ...
- Java基础环境搭建
- (转）css3前缀
CSS3的前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分.看看都有哪些前缀: -webkit(chrome) -moz(firefox) -ms(ie) ...
- 最新版spark1.1.0集群安装配置
和分布式文件系统和NoSQL数据库相比而言,spark集群的安装配置还算是比较简单的: 很多教程提到要安装java和scala,但我发现spark最新版本是包含scala的,JRE采用linux内嵌的 ...
- asp中的几个取整函数fix(),int(),round()的用法
asp中的几个取整函数是:fix(),int(),round(); Int(number).Fix(number)函数返回数字的整数部分.number 参数可以是任意有效的数值表达式.如果 numbe ...
- 仿php的日期函数，asp时间处理函数
<% '****************************** '时间处理函数 'FormatDate(Str,DateTime) 'Str 字符串,DateTime 时间 '返回类型为字 ...
- 20160526-20160531mybatis入门进阶
mybatis第二天 高级映射 查询缓存 和spring整合 课程复习: mybatis是什么? mybatis是一人持久层框架,mybatis是一个不完全的ORM框架.sql语句需要程序员自己去编 ...
- 使用greenDao出现Property 'status' is not part of ********.NewCommentDao@717de9a
应为版本号的原因造成的,升级Schema版本号即可
- Scala语言初识
scala是一种集面向对象特性和函数式特性于一身并可运行在JVM上的强类型静态语言.因为可以运行在JVM上,并在设计时借鉴于大量的java语言特性,故可以和java互动并可以调用java相关类库,这让 ...