ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁(yè)完整代碼
更新時(shí)間：2016年10月06日 07:42:10 作者：睡在我下鋪的上鋪的胖子
這篇文章主要為大家詳細(xì)介紹了ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁(yè)完整代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下
使用豆瓣api，得到分頁(yè)結(jié)果。相當(dāng)于從后臺(tái)數(shù)據(jù)庫(kù)獲得的結(jié)果一樣。所不同的是，沒法事先知道頁(yè)數(shù)。雖然通過(guò)請(qǐng)求api可以獲得總頁(yè)數(shù)，但由于ajax是異步的，所以對(duì)于分頁(yè)一開始就要給出總頁(yè)數(shù)來(lái)說(shuō)，這是沒有意義的。我使用了一個(gè)固定總頁(yè)數(shù)65（正是搜索javascript書籍返回的總頁(yè)數(shù)）。所以其他書籍是并不是65頁(yè)，會(huì)出現(xiàn)多頁(yè)或者少頁(yè)的情況，這并不是bug。
特點(diǎn)
1、全程不需要接觸后臺(tái)，前端獨(dú)立就可以（我找過(guò)好長(zhǎng)時(shí)間都沒找過(guò)完整的例子）。
2、使用了bootstrap的pagination制作頁(yè)碼和panel制作放置結(jié)果的面板。
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" /><!-- 換成自己的目錄 -->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
</head>
<style>
.pagination> li > a {
cursor: pointer;
}
.pagination > li > span {
margin-left: 0;
color: #ccc;
background-color: transparent;
cursor: default;
}
.pagination > li > span:hover {
color: #ccc;
background-color: transparent;
cursor: default;
}
.m20 {
margin: 20px 0;
}
</style>
<body>
<div class="container-fluid">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<form class="input-group">
<input type="text" value="javascript" class="form-control" id="bookName" placeholder="請(qǐng)輸入書名" required="required"/>
<span class="input-group-btn">
<button class="btn" id="search">搜索</button>
</span>
</form>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<th>書名</th>
<th>作者</th>
<th>出版日期</th>
<th>平均分</th>
<th>價(jià)格</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="test"></div>
</div>
<div class="col-md-4">
<div class="input-group m20"><!-- 保持與#test中的.pagination對(duì)齊 -->
<input type="text" class="form-control" id="page"/>
<span class="input-group-btn">
<button class="btn btn-default" id="jumpToPage">GO</button>
</span>
</div>
</div>
</div>
<div id="result" class="alert alert-info"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> <!-- 換成自己的目錄 -->
<script type="text/javascript" src="js/bootstrap.js" ></script> <!-- 換成自己的目錄 -->
<script type="text/javascript">
var partPageModule = ( function ( $ ) {
var
initPager = null,// 初始換分頁(yè)函數(shù)
setPagerHTML = null,// 生成分的頁(yè)HTML代碼
pageClick = null,// 每一頁(yè)按鈕的點(diǎn)擊事件
ajax = null, // ajax請(qǐng)求后臺(tái)數(shù)據(jù)
renderButton = null,
$content = $( '' ) // 動(dòng)態(tài)生成的頁(yè)碼
;
/* 功能：完成初始化
* @totalPages 總頁(yè)數(shù)，從后端獲取
* @currentPage 當(dāng)前所在的頁(yè)數(shù)
*/
initPager = function ( totalPages, currentPage ) {
$content = setPagerHTML({
currentPage: currentPage,
totalPages: totalPages,
pageClick: PageClick
})
$( '#test' ).empty().append( $content );// 得到分頁(yè)后添加到#test
$( '#jumpToPage' ).click( function ( e ) {// 綁定GO按鈕的點(diǎn)擊事件
e.preventDefault();
PageClick( totalPages, $('#page').val() * 1);
})
$( '#page' ).keyup( function ( e ) {// Enter鍵綁定搜索事件
if ( e.keyCode === 13 ) {
$( '#jumpToPage').trigger( 'click' );
}
})
$( '#result' ).html( '你點(diǎn)擊的是第' + currentPage + '頁(yè)')
};
/* 功能：頁(yè)碼點(diǎn)擊事件。重新生成所有頁(yè)碼，并且使用ajax獲取數(shù)據(jù)
*/
PageClick = function ( totalPages, currentPage ) {
initPager( totalPages, currentPage );
ajax( currentPage );// 使用jsonp請(qǐng)求豆瓣
}
ajax = function ( currentPage ) {
var
$input = $( '#bookName' ),
bookName = '',
$tbody = $( '#tbody' )
// totalPages
;
bookName = $input.val();
if ( !bookName ) { // 如果沒有輸入，就不要發(fā)送請(qǐng)求了
$input.focus();
return;
} else {
$.ajax({
type: 'get',
url: 'https://api.douban.com/v2/book/search',// 豆瓣圖書api
dataType: 'jsonp',
data: {
q: bookName,
start: ( parseInt( currentPage )-1 )*20 || 0
},
success: function ( data ) {
var
html = '',
books = data.books
;
// totalPages = Math.ceil( data.total / data.count );
books.forEach( function ( value, index ) {
html += '<tr>'
+ '<td><a href="' + value.alt + '">' + value.title + '</a></td>'
+ '<td>' + value.author + '</td>'
+ '<td>' + value.pubdate + '</td>'
+ '<td>' + value.rating.average + '</td>'
+ '<td>' + value.price + '</td>'
+ '</tr>';
})
$tbody.html( html );
}
})
}
// return totalPages;
}
setPagerHTML = function ( options ) {
var
currentPage = options.currentPage,
totalPages = options.totalPages,
pageClick = options.pageClick,
$content = $('<ul class="pagination"></ul>'),
startPage = 1,
nextPage = currentPage + 1,//不需要考慮超出問題，后面有條件
prevPage = currentPage - 1
;
/* 邏輯處理，根據(jù)點(diǎn)擊的不同的頁(yè)生成不同的ul */
if ( currentPage == startPage ) {//當(dāng)前頁(yè)是起始頁(yè)
$content.append( '<li><span>首頁(yè)</span></li>' ); // 首頁(yè)不可用
$content.append( '<li><span>上一頁(yè)</span></li>' ); // 上一頁(yè)不可用
} else { // 不是起始頁(yè)
$content.append( renderButton( totalPages, 1, pageClick, '首頁(yè)') ); // 生成首頁(yè)并綁定事件
$content.append( renderButton( totalPages, prevPage, pageClick, '上一頁(yè)') ); // 生成上一頁(yè)并綁定事件
}
if ( totalPages <=5 && currentPage <= 5 ) {// 總頁(yè)數(shù)小于5，當(dāng)前頁(yè)小于5，全部生成頁(yè)碼
for ( var i = 1; i <= totalPages; i++ ) {
if( i === currentPage ) {
$content.append( '<li class="active><span>' + i + '</span></li>' );// 當(dāng)前頁(yè)不可點(diǎn)擊
} else {
$content.append( renderButton( totalPages, i, pageClick, i) );// 其他頁(yè)可以點(diǎn)擊
}
}
} else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 總頁(yè)數(shù)大于5，當(dāng)前頁(yè)接近總頁(yè)數(shù)，前面顯示...,后面顯示到結(jié)尾的頁(yè)碼
$content.append( '<li><span>...</span></li>' );
for( var i = totalPages - 4; i <= totalPages; i++ ) {
if ( i === currentPage ) {
$content.append( '<li class="active"><span>' + i + '</span></li>' );
} else {
$content.append( renderButton( totalPages, i, pageClick, i) );
}
}
} else if ( totalPages > 5 && currentPage > 3) {// 總頁(yè)數(shù)大于5，當(dāng)前頁(yè)在中間，前后生成...，生成中間頁(yè)碼
$content.append( '<li><span>...</span></li>' );
for ( var i = currentPage - 2; i < currentPage + 2; i++ ) {
if ( i === currentPage ) {
$content.append( '<li class="active"><span>' + i + '</span></li>' );
} else {
$content.append( renderButton( totalPages, i ,pageClick, i) );
}
}
$content.append( '<li><span>...</span></li>' );
} else if ( totalPages > 5 && currentPage <= 3 ) {// 總頁(yè)數(shù)大于5，當(dāng)前頁(yè)接近第一頁(yè)，顯示前面頁(yè)碼，后面顯示...
for ( var i = 1; i <= 5; i++ ) {
if ( i === currentPage ) {
$content.append( '<li class="active"><span>' + i + '</span></li>' );
} else {
$content.append( renderButton( totalPages, i ,pageClick, i) );
}
}
$content.append( '<li><span>...</span></li>' );
}
if ( currentPage == totalPages ) {//當(dāng)前頁(yè)是末頁(yè)
$content.append( '<li><span>下一頁(yè)</span></li>' ); // 下一頁(yè)不可用
$content.append( '<li><span>末頁(yè)</span></li>' ); // 末頁(yè)不可用
} else { // 不是起始頁(yè)
$content.append( renderButton( totalPages, nextPage, pageClick, '下一頁(yè)') ); // 生成首頁(yè)并綁定事件
$content.append( renderButton( totalPages, totalPages, pageClick, '末頁(yè)') ); // 生成上一頁(yè)并綁定事件
}
return $content;
}
renderButton = function ( totalPages, goPageIndex, eventHander, text ) {
var $gotoPage = $( '<li><a title="第' + goPageIndex + '頁(yè)">' + text + '</a></li>' );
$gotoPage.click( function () {
eventHander( totalPages, goPageIndex );
})
return $gotoPage;
}
return {
init: initPager,
ajax: ajax
}
}(jQuery))
$( function () {
$( '#search' ).click( function ( e ) {
e.preventDefault();
var totalPage = partPageModule.ajax(1);// 由于ajax是異步的，
totalPage = totalPage || 65;// 所以這個(gè)總頁(yè)數(shù)是不準(zhǔn)確的。一般這個(gè)數(shù)據(jù)是后端返回的。這里的65是javascript搜索的頁(yè)數(shù)，不同的書籍搜索結(jié)果不一樣，由于ajax異步執(zhí)行，所以這里會(huì)默認(rèn)為65。這里不是bug。
partPageModule.init( totalPage, 1 );
})
$( '#bookName' ).keyup( function ( e ) {
if ( e.keyCode === 13 ) {
$( '#search' ).trigger( 'click' );
}
})
$( '#search' ).trigger( 'click' );
})
</script>
</body>
</html>
<!-- https://api.douban.com/v2/book/search -->
<!--
參數(shù) 意義 備注
q 查詢關(guān)鍵字 q和tag必傳其一
tag 查詢的tag q和tag必傳其一
start 取結(jié)果的offset 默認(rèn)為0
count 取結(jié)果的條數(shù) 默認(rèn)為20，最大為100
-->
參考
參考這里，書中的邏輯處理部分使用的是這里的代碼，不過(guò)做了修改。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AJAX開發(fā)技術(shù)在PHP開發(fā)中的簡(jiǎn)單應(yīng)用技巧
AJAX無(wú)疑是2005年炒的最熱的Web開發(fā)技術(shù)之一，當(dāng)然，這個(gè)功勞離不開Google。我只是一個(gè)普通開發(fā)者，使用AJAX的地方不是特別多，我就簡(jiǎn)單的把我使用的心得說(shuō)一下。（本文假設(shè)用戶已經(jīng)具有JavaScript、HTML、CSS等基本的Web開發(fā)能力）2010-04-04
Ajax 匯總以及初步評(píng)價(jià)...2006-08-08
最近學(xué)習(xí)js，肯定會(huì)學(xué)到ajax中的東西，所以，看到比較好的ajax函數(shù)，免不得要貼出來(lái)，供大家參考。這個(gè)函數(shù)摘錄自john resig的書中。2009-09-09
本篇文章主要是對(duì)Ajax級(jí)聯(lián)菜單的實(shí)例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
利用AjaxSubmit()方法實(shí)現(xiàn)Form提交表單后回調(diào)功能
ajaxSubmit()方法是JQuery Form表單插件中的方法，使用時(shí)，需要在jsp或者h(yuǎn)tml頁(yè)面上，引入JQuery庫(kù)和Form插件。接下來(lái)通過(guò)本文給大家分享通過(guò)AjaxSubmit()方法實(shí)現(xiàn)Form提交表單后回調(diào)功能，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
建立XMLHttpRequest對(duì)象...2006-07-07
Jquery Ajax請(qǐng)求文件下載操作失敗的原因分析及解決辦法
jQuery確實(shí)是一個(gè)挺好的輕量級(jí)的JS框架，能幫助我們快速的開發(fā)JS應(yīng)用，并在一定程度上改變了我們寫JavaScript代碼的習(xí)慣，本文重點(diǎn)給大家介紹Jquery Ajax請(qǐng)求文件下載操作失敗的原因分析及解決辦法，對(duì)ajax請(qǐng)求失敗的原因分析感興趣的朋友一起學(xué)習(xí)把2015-11-11
這篇文章主要介紹了JavaScript性能優(yōu)化之函數(shù)節(jié)流（throttle）與函數(shù)去抖（debounce），感興趣的小伙伴們可以參考一下2016-08-08
AJAX技術(shù)基礎(chǔ)介紹...2007-03-03
ajax從JSP傳遞對(duì)象數(shù)組到后臺(tái)的方法
今天小編就為大家分享一篇ajax從JSP傳遞對(duì)象數(shù)組到后臺(tái)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08