豆瓣 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)使用TextKit实现精美的图文混排效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- BZOJ 3625 多项式求逆+多项式开根
思路: RT //By SiriusRen #include <bits/stdc++.h> using namespace std; <<,mod=; int A[N],C[ ...
- hihocode 编程练习赛17
1. f1 score 首先了解f1 score的计算方法, 我记得是学信息检索知道的, 然后简单处理就行. 由于我写的比较麻烦, 中间处理过程引入了一些除数为0的情况,导致错了很多次.其实是很简单的 ...
- 题解报告：hdu 3790 最短路径问题
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3790 Problem Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你起 ...
- 为什么使用HttpServlet?http协议特点、servlet
因为只有HttpServlet是基于http协议,实现Servlet接口,而http协议是短连接协议,能够实现客户端访问服务端后,数据交互后 连接自动断开.同时http协议基于tcp.ip协议,封装了 ...
- day03_12/13/2016_bean的管理之初始化和销毁
- [转]c# 对密码执行散列和 salt 运算方法
本文转自:http://www.cnblogs.com/CnBlogFounder/archive/2008/07/04/1235690.html 大家对密码执行散列和Salt运算一定不陌生.两个Vi ...
- Android开发笔记（9）——初步设置Menu
转载请注明:http://www.cnblogs.com/igoslly/p/6858656.html 初步设置Menu 设置Menu,在ActionBar上添加按钮操作: 在 ...
- Showplan 逻辑运算符和物理运算符参考
本文档已存档,并且将不进行维护. 运算符说明了 SQL Server 如何执行查询或数据操作语言 (DML) 语句. 查询优化器使用运算符生成查询计划,以创建在查询中指定的结果或执行在 DML 语句中 ...
- JS——html基本结构
document.title——文档标题 document.head——文档头标签 document.body——文档的主体 document.documentElement 表示整个文档的html标 ...