Rumah >hujung hadapan web >tutorial js >ajax结合豆瓣搜索进行分页如何实现（附代码）
ajax结合豆瓣搜索进行分页如何实现（附代码）
- php中世界最好的语言asal
- 2018-04-03 14:24:231550semak imbas
这次给大家带来ajax结合豆瓣搜索进行分页如何实现（附代码），ajax结合豆瓣搜索进行分页实现的注意事项有哪些，下面就是实战案例，一起来看一下。
使用豆瓣api，得到分页结果。相当于从后台数据库获得的结果一样。所不同的是，没法事先知道页数。虽然通过请求api可以获得总页数，但由于ajax是异步的，所以对于分页一开始就要给出总页数来说，这是没有意义的。我使用了一个固定总页数65（正是搜索javascript书籍返回的总页数）。所以其他书籍是并不是65页，会出现多页或者少页的情况，这并不是bug。
特点
1，全程不需要接触后台，前端独立就可以（我找过好长时间都没找过完整的例子）。
2，使用了bootstrap的pagination制作页码和panel制作放置结果的面板。
代码如下
<!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>
<p class="container-fluid">
<p class="col-md-12">
<p class="panel panel-default">
<p class="panel-heading">
<form class="input-group">
<input type="text" value="javascript" class="form-control" id="bookName" placeholder="请输入书名" required="required"/>
<span class="input-group-btn">
<button class="btn" id="search">搜索</button>
</span>
</form>
</p>
<p class="panel-body">
<table class="table table-bordered">
<thead>
<th>书名</th>
<th>作者</th>
<th>出版日期</th>
<th>平均分</th>
<th>价格</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
</p>
</p>
<p class="row">
<p class="col-md-6">
<p id="test"></p>
</p>
<p class="col-md-4">
<p class="input-group m20"><!-- 保持与#test中的.pagination对齐 -->
<input type="text" class="form-control" id="page"/>
<span class="input-group-btn">
<button class="btn btn-default" id="jumpToPage">GO</button>
</span>
</p>
</p>
</p>
<p id="result" class="alert alert-info"></p>
</p>
</p>
<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,// 初始换分页函数
setPagerHTML = null,// 生成分的页HTML代码
pageClick = null,// 每一页按钮的点击事件
ajax = null, // ajax请求后台数据
renderButton = null,
$content = $( '' ) // 动态生成的页码
;
/* 功能：完成初始化
* @totalPages 总页数，从后端获取
* @currentPage 当前所在的页数
*/
initPager = function ( totalPages, currentPage ) {
$content = setPagerHTML({
currentPage: currentPage,
totalPages: totalPages,
pageClick: PageClick
})
$( '#test' ).empty().append( $content );// 得到分页后添加到#test
$( '#jumpToPage' ).click( function ( e ) {// 绑定GO按钮的点击事件
e.preventDefault();
PageClick( totalPages, $('#page').val() * 1);
})
$( '#page' ).keyup( function ( e ) {// Enter键绑定搜索事件
if ( e.keyCode === 13 ) {
$( '#jumpToPage').trigger( 'click' );
}
})
$( '#result' ).html( '你点击的是第' + currentPage + '页')
};
/* 功能：页码点击事件。重新生成所有页码，并且使用ajax获取数据
*/
PageClick = function ( totalPages, currentPage ) {
initPager( totalPages, currentPage );
ajax( currentPage );// 使用jsonp请求豆瓣
}
ajax = function ( currentPage ) {
var
$input = $( '#bookName' ),
bookName = '',
$tbody = $( '#tbody' )
// totalPages
;
bookName = $input.val();
if ( !bookName ) { // 如果没有输入，就不要发送请求了
$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
;
/* 逻辑处理，根据点击的不同的页生成不同的ul */
if ( currentPage == startPage ) {//当前页是起始页
$content.append( '<li><span>首页</span></li>' ); // 首页不可用
$content.append( '<li><span>上一页</span></li>' ); // 上一页不可用
} else { // 不是起始页
$content.append( renderButton( totalPages, 1, pageClick, '首页') ); // 生成首页并绑定事件
$content.append( renderButton( totalPages, prevPage, pageClick, '上一页') ); // 生成上一页并绑定事件
}
if ( totalPages <=5 && currentPage <= 5 ) {// 总页数小于5，当前页小于5，全部生成页码
for ( var i = 1; 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 && totalPages - currentPage <= 2 ) {// 总页数大于5，当前页接近总页数，前面显示...,后面显示到结尾的页码
$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) {// 总页数大于5，当前页在中间，前后生成...，生成中间页码
$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 ) {// 总页数大于5，当前页接近第一页，显示前面页码，后面显示...
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 ) {//当前页是末页
$content.append( '<li><span>下一页</span></li>' ); // 下一页不可用
$content.append( '<li><span>末页</span></li>' ); // 末页不可用
} else { // 不是起始页
$content.append( renderButton( totalPages, nextPage, pageClick, '下一页') ); // 生成首页并绑定事件
$content.append( renderButton( totalPages, totalPages, pageClick, '末页') ); // 生成上一页并绑定事件
}
return $content;
}
renderButton = function ( totalPages, goPageIndex, eventHander, text ) {
var $gotoPage = $( '<li><a title="第' + goPageIndex + '页">' + 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;// 所以这个总页数是不准确的。一般这个数据是后端返回的。这里的65是javascript搜索的页数，不同的书籍搜索结果不一样，由于ajax异步执行，所以这里会默认为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 -->
<!--
参数 意义 备注
q 查询关键字 q和tag必传其一
tag 查询的tag q和tag必传其一
start 取结果的offset 默认为0
count 取结果的条数 默认为20，最大为100
-->
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci ajax结合豆瓣搜索进行分页如何实现（附代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：ajax怎样实现跨页面提交表单Artikel seterusnya：node解释执行js的过程分析
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional