豆瓣 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 ...
随机推荐
- [Swift通天遁地]四、网络和线程-(15)程序内购功能
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- python自动化学习笔记3-集合、函数、模块
文件操作 上次学习到文件的读写,为了高效的读写文件,我们可以用循环的方式,一行一行的进行读写操作,打开文件的方法是open的方法,打开文件执行完后还要进行关闭操作. 一般的文件流操作都包含缓冲机制,w ...
- 【转】Linux字符转换命令col
转自:http://www.cnblogs.com/ningvsban/p/3725464.html [root@www ~]# col [-xb]选项与参数:-x :将 tab 键转换成对等的空格键 ...
- 10.Nodes and Bindings
节点数据绑定 节点是构成Ventuz场景的基本元素.每个节点既属于图层.也属于层级或内容.既可以在图层编辑器,也可以在层级编辑器或内容编辑器中编辑. 内容节点包括资产描述(如材质.xml文件等).数字 ...
- P1968 美元汇率
题目背景 此处省略maxint+1个数 题目描述 在以后的若干天里戴维将学习美元与德国马克的汇率.编写程序帮助戴维何时应买或卖马克或美元,使他从100美元开始,最后能获得最高可能的价值. 输入输出格式 ...
- 将电脑浏览器User-Agent识别改成手机浏览器UA几种简单方法
第一种方法:修改浏览器的快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择“复制”,复制一个图标副本到桌面.右击该副本,选择“属性”,打开相应的对话框,在“目标”文本框的字符后面添加 ...
- python--11、协程
协程,又称微线程,纤程.英文名Coroutine. 子程序,或者称为函数,在所有语言中都是层级调用,比如A调用B,B在执行过程中又调用了C,C执行完毕返回,B执行完毕返回,最后是A执行完毕. 所以子程 ...
- unity3d 各键值对应代码
KeyCode :KeyCode是由Event.keyCode返回的.这些直接映射到键盘上的物理键. 值 对应键 Backspace 退格键 Delete Delet ...
- jQuery实现页面锚点滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- angular 零碎
相关链接 api(需要FQ) ui-router 知乎 作用域 angular 中作用域的概念是一个亮点,由不同的指令.controller等作用域组成的作用域树就是一个app.简单理解一个contr ...