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松耦合的比较新潮的 ...
随机推荐
- c/c++编译原理
转载自:http://blog.csdn.net/chengocean/article/details/6250779C源程序-->预编译处理(.c)-->编译.优化程序(.s..asm) ...
- JAVA_java关联源码
java怎样关联源码?? 1,按住control键,点一下你要看源码的类,跳到如下界面: 2,单击,跳到下一个界面 3,继续,找到jdk按照路径,找到src.zip文件 4. 4. 点击OK就可以看源 ...
- Android_GestureDetector
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- Linux操作系统的简单认识
1:Linux操作系统的历史 Linux操作系统是由unix操作系统发展而来的,但是Unix是收费的系统,而Linux操作系统的免费的,开源的,所以使用比较广泛,但是它是基于命令行的,不提供图形化用户 ...
- Ubuntu lnmp安装记录
参考了: Ubuntu 14.04 LTS 安装 LNMP Nginx\PHP5 (PHP-FPM)\MySQL 在访问 info.php的时候,我显示的是502错误.后面我参考了: Ubuntu15 ...
- yii下使用oracle中文都变成问号乱码的解决方法
在配置文件中,一般会用以下配置: 'db_oracle'=>array( 'class' => 'CDbConnection', 'connectionString'=>'oci:d ...
- css关于宽度
很多时候,我们指定了某个元素的宽度,浏览器渲染时却只给这个元素一半的宽度,这时可以试试min-width属性,该属性表示浏览器不能偷懒,资源再紧张也得分配min-width指定的宽度.
- 【linux操作命令】mysql
1.linux下启动mysql的命令: mysqladmin start /ect/init.d/mysql start (前面为mysql的安装路径) 2.linux下重启mysql的命令: mys ...
- 理解Spark的RDD
RDD是个抽象类,定义了诸如map().reduce()等方法,但实际上继承RDD的派生类一般只要实现两个方法: def getPartitions: Array[Partition] def com ...
- java基础之Java变量命名规范
本文介绍的是java中的变量的命名规则,对于初学者来说,还是很重要的.希望对你有帮助,一起来看. Java是一种区分字母的大小写(case-sensitive)的语言,下面谈谈Java语言中包.类.变 ...