豆瓣 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通天遁地]九、拔剑吧-(16)搭建卡片页面：Card Peek/Pop动态切换界面
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- [转]asp.net MVC 常见安全问题及解决方案
本文转自:http://www.cnblogs.com/Jessy/p/3539564.html asp.net MVC 常见安全问题及解决方案 一．CSRF (Cross-site request ...
- <assert.h>
Diagnostics 定义宏: void assert (scalar-expression); 若expression为0,则打印出错信息(类似Assertion failed: expressi ...
- Java—break跳出语句
在开发代码时,常常会产生这样的疑惑:break跳出语句是如何应用的呢? 使用break的场景有两种:一.switch语句中.二.循环语句. 这里就不介绍switch语句,主要说一下break在循环中的 ...
- JS高级——原型链
构造函数 构造函数是特殊的函数,里面没有returen返回值 new的过程中,会自动将对象返回,不需要return new的过程中,会执行函数中的代码,会将创建的对象赋值给构造函数中的this 基本概 ...
- html——快捷键
webstorm ctrl+c 复制 ctrl+v 粘贴 ctrl+x 剪切一行或删除一行 ctrl+d 复制本行到下一行 ctrl+z 退回之前操作 ctrl+shift+z 已经做好的退回之后的下 ...
- JS——锚点的运用
锚点的两种形式: 1.<a href="#a">点击到锚点</a> 2.window.location.hash = "#a"; 最后都 ...
- 【技术累积】【点】【java】【22】UUID
基础概念&使用 UUID是Universally Unique Identifier的缩写,它是在一定的范围内(从特定的名字空间到全球)唯一的机器生成的标识符. 说白了就是个唯一键,只不过到处 ...
- pycharm之gitignore设置
首先检查pycharm是否安装了ignore插件 项目目录如图: 选中项目automationTest名称,右击-->New-->查看是否有ignore file选项,如果有表示Pycah ...
- Dynamics 365 CRM Connected Field Service 自动发送command
上期降到了怎样部署connected field service(CFS) 我们假设现在IoT 设备是温度监控器, 当温度触发我们之前预设的温度值, IoT会通过IoT Hub 发送IoT Alert ...