豆瓣 jsonp 请求数据 并分页
豆瓣分页
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.豆瓣分页</title>
<meta name="author" content="Administrator" />
<!-- Date: -- -->
<style>
*{margin:;padding:;font-size:13px;font-family: microsoft yahei}
li{list-style:none}
#text{width:200px;padding:5px;border:1px solid orange}
#btn{padding:4px 5px;background:orange; border:1px solid #e53d0f;cursor:pointer}
#btn:hover{background: #f1b931}
#book{width:1200px;}
#book dl{width:150px;border:1px solid #2272BD;float:left;margin:10px;height:160px; text-align:center}
#book dl dt{padding:10px }
#page{ width:1000px}
#page li{width:30px;height:30px;border:1px solid #;border-radius:5px;text-align:center;line-height:30px;float:left;margin:3px;cursor:pointer}
#page li:hover{background:yellow}
#page li.active{background:red}
#page li.prev, #page li.next{width:100px;border-radius:none;}
#pager span.prev{float:left;}
#pager span{width:50px;height:30px;background:orange;cursor:pointer;border:1px solid orange;text-align:center;line-height:30px;display: inline-block;margin:3px;}
#pager{clear:both}
</style>
<script>
function fn1(data){
var oTxt=document.getElementById('text');
var oBtn=document.getElementById('btn');
var oDiv=document.getElementById('book');
var oTotalText=document.getElementById('result'); var oTotalResulte=data['opensearch:totalResults'].$t;
var oIndex=; oTotalText.innerHTML='共搜索到'+oTotalResulte+'结果' //加内容
addContent()
function addContent(){
var str='';
for(var i=;i<data.entry.length;i++){
//var oDl=document.createElement('dl');
str+='<dl><dt>'+data.entry[i]['title']['$t']+'</dt><dd><img src="'+data.entry[i]['link'][]['@href']+'"/></dd></dl>';
//oDiv.appendChild(oDl);
}
oDiv.innerHTML=str;
} } function fn2(data){
//分页
var oTxt=document.getElementById('text');
var oTotalResulte=data['opensearch:totalResults'].$t;
var oPager=document.getElementById('pager');
var oPage=document.getElementById('page');
var oSorter=document.getElementById('sorter');
var pageNum=Math.ceil(oTotalResulte/(data['opensearch:itemsPerPage'].$t));
var iNow=;
var str1='';
for(var i=;i<;i++){
str1+='<li>'+(i+)+'</li>';
}
oPage.innerHTML=str1;
var oPrev=document.createElement('span');
oPrev.className='prev';
oPrev.innerHTML='上一页';
oPager.insertBefore(oPrev,oPage); var oNext=document.createElement('span');
oNext.className='next';
oNext.innerHTML='下一页';
oPager.appendChild(oNext); //分页点击
var aLi=oPage.getElementsByTagName('li');
aLi[iNow].className='active';
oSorter.innerHTML= (iNow+)+'/'+pageNum; for(var i=;i<aLi.length;i++){
aLi[i].index=i; aLi[i].onmouseover=function(){
for(var i=;i<aLi.length;i++){
if(aLi[i].className!='active'){
aLi[i].className=""
}
}
this.classname="hover";
} aLi[i].onclick=function(){
for(var i=;i<aLi.length;i++){
aLi[i].className=""
}
iNow=this.index;
console.log(iNow);
oSorter.innerHTML= (iNow+)+'/'+pageNum;
this.className="active";
oIndex = (data['opensearch:itemsPerPage'].$t)*iNow;
var oScript=document.createElement('script');
oScript.src='http://api.douban.com/book/subjects?q='+oTxt.value+'&alt=xd&callback=fn1&start-index='+oIndex;
document.body.appendChild(oScript);
//addContent()
} //上一页 下一页点击
var aSpan=oPager.getElementsByTagName('span');
aSpan[].onclick=function(){
for(var i=;i<aLi.length;i++){
if(aLi[i].className=='active'){
iNow=i;
}
aLi[i].className=''; }
iNow++;
if(iNow<aLi.length){
aLi[iNow].className='active';
}
oSorter.innerHTML= (iNow+)+'/'+pageNum;
console.log(iNow); oIndex = (data['opensearch:itemsPerPage'].$t)*iNow;
var oScript=document.createElement('script');
oScript.src='http://api.douban.com/book/subjects?q='+oTxt.value+'&alt=xd&callback=fn1&start-index='+oIndex;
document.body.appendChild(oScript);
} aSpan[].onclick=function(){
for(var i=;i<aLi.length;i++){
if(aLi[i].className=='active'){
iNow=i;
}
aLi[i].className=''; } if(iNow>){
iNow--;
} if(iNow < aLi.length ){
aLi[iNow].className='active';
} oSorter.innerHTML= (iNow+)+'/'+pageNum;
console.log(iNow); oIndex = (data['opensearch:itemsPerPage'].$t)*iNow;
var oScript=document.createElement('script');
oScript.src='http://api.douban.com/book/subjects?q='+oTxt.value+'&alt=xd&callback=fn1&start-index='+oIndex;
document.body.appendChild(oScript);
} }
} window.onload=function(){ var oTxt=document.getElementById('text');
var oBtn=document.getElementById('btn');
oBtn.onclick=function(){
if(oTxt.value!=''){
var oScript=document.createElement('script');
oScript.src='http://api.douban.com/book/subjects?q='+oTxt.value+'&alt=xd&callback=fn1';
document.body.appendChild(oScript); var oScript1=document.createElement('script');
oScript1.src='http://api.douban.com/book/subjects?q='+oTxt.value+'&alt=xd&callback=fn2';
document.body.appendChild(oScript1); } }
}
</script>
</head>
<body>
<input type="text" id="text" />
<input type="button" value="搜索" id="btn" />
<div id="result"></div>
<div id="book"></div>
<div id="pager">
<ul id="page"></ul>
</div>
<div id="sorter"></div>
</body>
</html>
豆瓣 jsonp 请求数据 并分页的更多相关文章
- vue 使用 jsonp 请求数据
vue 使用 jsonp 请求数据 vue请求数据的时候,会遇到跨域问题,服务器为了保证信息的安全,对跨域请求进行拦截,因此,为了解决vue跨域请求问题,需要使用jsonp. 安装jsonp npm ...
- 自定义jsonp请求数据
整理代码的时候发现一个以前写的实现jsonp请求方法,放在这里分享一下~ 原理:通过js新建script dom对象,利用src携带参数和callback方法,将数据发送至后端,需要后端配合将数据放在 ...
- 封装 jsonp请求数据的方法
什么是jsonp : Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不 ...
- get和post方式请求数据，jsonp
get方式请求数据: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p.p2 { ma ...
- Angular 请求数据
Angular 请求数据 get post 以及 jsonp 请求数据 引入 HttpModule .JsonpModule 普通的 HTTP 调用并不需要用到 JsonpModule,不过稍后我们就 ...
- iOS不得姐项目--推荐关注模块(一个控制器控制两个tableView),数据重复请求的问题,分页数据的加载,上拉下拉刷新(MJRefresh)
一.推荐关注模块(一个控制器控制两个tableView) -- 数据的显示 刚开始加载数据值得注意的有以下几点 导航控制器会自动调整scrollView的contentInset,最好是取消系统的设置 ...
- 使用JSONP跨域请求数据
下面代码,可以使用JSONP进行跨域请求数据,Insus.NET记录以下,以备忘记.
- Vue vue-resource三种请求数据方式pet，post，jsonp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 http://www.jq22.com/jquery-info13 ...
随机推荐
- MVC系列学习(十五)-验证码
1.方式一: public class VCode { /// <summary> /// 生成验证码图片 字节数组 /// </summary> /// <return ...
- es6杂记
es6杂记 let 和 const let 仅在代码块里有效 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b / ...
- vue杂记
VUE杂记 声明式渲染 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#app' ...
- MySQL实现当前数据表的所有时间都增加或减少指定的时间间隔
DATE_ADD() 函数向日期添加指定的时间间隔. 当前表所有数据都往后增加一天时间: UPDATE ACT_BlockNum SET CreateTime = DATE_ADD(CreateTim ...
- SQL基本操作——row_number() over()
row_number() 与over()是在一起使用的,作用就是对表进行排序并记数. 语法: ROW_NUMBER ( ) OVER ( [ PARTITION BY value_expression ...
- 如何解决Win10预览版一闪而过的disksnapshot.exe进程？
Win10之家讯上周微软如约向Insider用户推送了Win10预览版10576更新,本次更新修复了之前版本中存在的一些问题,从日常使用的情况来看,对比之前的预览版系统要更稳定了一些,但是还是存在一些 ...
- sratookit
sratookit 下载后解压 tar -zxvf sratoolkit.2.8.2-1-ubuntu64.tar.gz 移动到专门安装生物信息软件的目录下 mv sratoolkit.2.8.2-1 ...
- Node.js 命令行程序开发教程 ---------http://www.ruanyifeng.com/blog/2015/05/command-line-with-node.html
五.yargs 模块 shelljs 只解决了如何调用 shell 命令,而 yargs 模块能够解决如何处理命令行参数.它也需要安装. $ npm install --save yargs yarg ...
- animation与transition区别
transition: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间:默认值分别为:all 0 ease 0 1.局限性: 1)只能设置一个属性 2)需要伪类/事件触发才执行 3)只能设置动画 ...
- Android组件化最佳实践 ARetrofit原理
ARetrofit原理讲原理之前,我想先说说为什么要ARetrofit.开发ARetrofit这个项目的思路来源其实是Retrofit,Retrofit是Square公司开发的一款针对Android网 ...