豆瓣 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="'+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://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://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://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://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://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="搜索" 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>
