首页 > 代码库 > 豆瓣 jsonp 请求数据 并分页
豆瓣 jsonp 请求数据 并分页
豆瓣分页
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>6.豆瓣分页</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-23 --> 10 <style> 11 *{margin:0;padding:0;font-size:13px;font-family: microsoft yahei} 12 li{list-style:none} 13 #text{width:200px;padding:5px;border:1px solid orange} 14 #btn{padding:4px 5px;background:orange; border:1px solid #e53d0f;cursor:pointer} 15 #btn:hover{background: #f1b931} 16 #book{width:1200px;} 17 #book dl{width:150px;border:1px solid #2272BD;float:left;margin:10px;height:160px; text-align:center} 18 #book dl dt{padding:10px 0} 19 #page{ width:1000px} 20 #page li{width:30px;height:30px;border:1px solid #008000;border-radius:5px;text-align:center;line-height:30px;float:left;margin:3px;cursor:pointer} 21 #page li:hover{background:yellow} 22 #page li.active{background:red} 23 #page li.prev, #page li.next{width:100px;border-radius:none;} 24 #pager span.prev{float:left;} 25 #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;} 26 #pager{clear:both} 27 </style> 28 <script> 29 function fn1(data){ 30 var oTxt=document.getElementById(‘text‘); 31 var oBtn=document.getElementById(‘btn‘); 32 var oDiv=document.getElementById(‘book‘); 33 var oTotalText=document.getElementById(‘result‘); 34 35 36 var oTotalResulte=data[‘opensearch:totalResults‘].$t; 37 var oIndex=1; 38 39 40 oTotalText.innerHTML=‘共搜索到‘+oTotalResulte+‘结果‘ 41 42 43 44 //加内容 45 addContent() 46 function addContent(){ 47 var str=‘‘; 48 for(var i=0;i<data.entry.length;i++){ 49 //var oDl=document.createElement(‘dl‘); 50 str+=‘<dl><dt>‘+data.entry[i][‘title‘][‘$t‘]+‘</dt><dd><img src="http://www.mamicode.com/‘+data.entry[i][‘link‘][2][‘@href‘]+‘"/></dd></dl>‘; 51 //oDiv.appendChild(oDl); 52 } 53 oDiv.innerHTML=str; 54 } 55 56 } 57 58 function fn2(data){ 59 //分页 60 var oTxt=document.getElementById(‘text‘); 61 var oTotalResulte=data[‘opensearch:totalResults‘].$t; 62 var oPager=document.getElementById(‘pager‘); 63 var oPage=document.getElementById(‘page‘); 64 var oSorter=document.getElementById(‘sorter‘); 65 var pageNum=Math.ceil(oTotalResulte/(data[‘opensearch:itemsPerPage‘].$t)); 66 var iNow=0; 67 var str1=‘‘; 68 for(var i=0;i<10;i++){ 69 str1+=‘<li>‘+(i+1)+‘</li>‘; 70 } 71 oPage.innerHTML=str1; 72 var oPrev=document.createElement(‘span‘); 73 oPrev.className=‘prev‘; 74 oPrev.innerHTML=‘上一页‘; 75 oPager.insertBefore(oPrev,oPage); 76 77 var oNext=document.createElement(‘span‘); 78 oNext.className=‘next‘; 79 oNext.innerHTML=‘下一页‘; 80 oPager.appendChild(oNext); 81 82 83 84 85 86 //分页点击 87 var aLi=oPage.getElementsByTagName(‘li‘); 88 aLi[iNow].className=‘active‘; 89 oSorter.innerHTML= (iNow+1)+‘/‘+pageNum; 90 91 for(var i=0;i<aLi.length;i++){ 92 aLi[i].index=i; 93 94 aLi[i].onmouseover=function(){ 95 for(var i=0;i<aLi.length;i++){ 96 if(aLi[i].className!=‘active‘){ 97 aLi[i].className="" 98 } 99 } 100 this.classname="hover"; 101 }102 103 104 aLi[i].onclick=function(){105 for(var i=0;i<aLi.length;i++){106 aLi[i].className=""107 }108 iNow=this.index;109 console.log(iNow);110 oSorter.innerHTML= (iNow+1)+‘/‘+pageNum;111 this.className="active";112 oIndex = (data[‘opensearch:itemsPerPage‘].$t)*iNow;113 var oScript=document.createElement(‘script‘);114 oScript.src=http://www.mamicode.com/‘http://api.douban.com/book/subjects?q=‘+oTxt.value+‘&alt=xd&callback=fn1&start-index=‘+oIndex;115 document.body.appendChild(oScript);116 //addContent()117 }118 119 //上一页 下一页点击120 var aSpan=oPager.getElementsByTagName(‘span‘);121 aSpan[1].onclick=function(){122 for(var i=0;i<aLi.length;i++){123 if(aLi[i].className==‘active‘){124 iNow=i; 125 }126 aLi[i].className=‘‘;127 128 }129 iNow++;130 if(iNow<aLi.length){131 aLi[iNow].className=‘active‘;132 }133 oSorter.innerHTML= (iNow+1)+‘/‘+pageNum;134 console.log(iNow);135 136 oIndex = (data[‘opensearch:itemsPerPage‘].$t)*iNow;137 var oScript=document.createElement(‘script‘);138 oScript.src=http://www.mamicode.com/‘http://api.douban.com/book/subjects?q=‘+oTxt.value+‘&alt=xd&callback=fn1&start-index=‘+oIndex;139 document.body.appendChild(oScript); 140 } 141 142 aSpan[0].onclick=function(){143 for(var i=0;i<aLi.length;i++){144 if(aLi[i].className==‘active‘){145 iNow=i; 146 }147 aLi[i].className=‘‘;148 149 }150 151 if(iNow>0){152 iNow--; 153 }154 155 if(iNow < aLi.length ){156 aLi[iNow].className=‘active‘; 157 }158 159 160 oSorter.innerHTML= (iNow+1)+‘/‘+pageNum;161 console.log(iNow);162 163 oIndex = (data[‘opensearch:itemsPerPage‘].$t)*iNow;164 var oScript=document.createElement(‘script‘);165 oScript.src=http://www.mamicode.com/‘http://api.douban.com/book/subjects?q=‘+oTxt.value+‘&alt=xd&callback=fn1&start-index=‘+oIndex;166 document.body.appendChild(oScript); 167 } 168 169 170 171 172 }173 }174 175 window.onload=function(){176 177 var oTxt=document.getElementById(‘text‘);178 var oBtn=document.getElementById(‘btn‘);179 oBtn.onclick=function(){180 if(oTxt.value!=‘‘){181 var oScript=document.createElement(‘script‘);182 oScript.src=http://www.mamicode.com/‘http://api.douban.com/book/subjects?q=‘+oTxt.value+‘&alt=xd&callback=fn1‘;183 document.body.appendChild(oScript);184 185 var oScript1=document.createElement(‘script‘);186 oScript1.src=http://www.mamicode.com/‘http://api.douban.com/book/subjects?q=‘+oTxt.value+‘&alt=xd&callback=fn2‘;187 document.body.appendChild(oScript1);188 189 }190 191 }192 }193 </script>194 </head>195 <body>196 <input type="text" id="text" />197 <input type="button" value=http://www.mamicode.com/"搜索" id="btn" />198 <div id="result"></div>199 <div id="book"></div>200 <div id="pager">201 <ul id="page"></ul>202 </div>203 <div id="sorter"></div>204 </body>205 </html>
豆瓣 jsonp 请求数据 并分页
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。