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松耦合的比较新潮的 ...
随机推荐
- Android 断点续传
断点续传指的是在下载或上传时,将下载或上传任务(一个文件或一个压缩包)人为的划分为几个部分,每一个部分采用一个线程进行上传或下载,如果碰到网络故障,可以从已经上传或下载的部分开始继续上传下载未完成的部 ...
- LLDB调试基本使用
在平时开发中,我们可能需要调试某些东西,比如查看给服务器发请求时传过去的参数,如果不适用LLDB的话我们用的最多的就是通过NSLog方式去打印,但现在我们可以精简这个步骤,那就是使用LLDB调试命令. ...
- [wordpress]后台自定义菜单字段和使用wordpress color picker
Wordpress Version 4.4.2 参考链接 插件使用wordpress color picker:Add A New Color Picker To WordPress 后台菜单自定义字 ...
- SqlBulkCopy 数据批量操作使用的类
private void SqlBulkCopyByDataTable(string connectionString,string TableName,DataTable dt) { using ( ...
- PHP基础2
一.函数赋值问题 function add($num1,$num2=5){ echo $num1+$num2; } add(5,19); 二.global 全局变量 把变量加入到全局变量数组中 ...
- Extjs combo赋值与刷新的先后顺序
今天在跟一个弹出框中的多选下拉框赋值并实现反选的时候.惊讶的发现:原来我之前对于Combo的赋值的认知观是错误的. 我开始在窗体的beforeshow事件中对Combo控件赋值.开始使用了setVal ...
- Android系统中的dp和px的转换
android系统中DP和SP的转化:1.首先分析TypedValue.java 可以调用以下代码获得dp的值 TypedValue.applyDimension(TypedValue.COMPLEX ...
- Android studio 删除Module、project
很简单: 1 选中项目右键:Open Module Setting 2 选择要删除的项目,点击“-”即可
- VMware下LINUX的虚拟机增加磁盘空间
先关闭虚拟机电源,做如下设置:“ 虚拟机”--“虚拟机设置”--“磁盘”--“扩展” 可以随意添加你需要增到到的磁盘大小(如15Gb,表示磁盘总量,包含原来的磁盘容量); 再重启电源进入系统做如下步骤 ...
- db2相关问题及解决方法
DB2相关问题及解决方法: 一.DB2中的代码页(codepage)问题. DB2备份时发生过代码页错误的问题,修改代码页后备份正常,但创建数据库时又发生代码页的错误.这是DB2服务器使用的代码页配置 ...