今回は、Ajax と Douban Search を組み合わせてページングを実装する方法を説明します (コードは添付されています)。Ajax と Douban Search を組み合わせてページングを実装する場合の 注意事項について説明します。
Douban API を使用してページ分割された結果を取得します。バックエンド データベースから取得された結果と同等です。違いは、ページ数を事前に知る方法がないことです。総ページ数は API をリクエストすることで取得できますが、Ajax は非同期であるため、ページングの開始時に総ページ数を与えるのは意味がありません。固定の総ページ数 65 を使用しました (正確に、javascriptbooks の検索によって返される総ページ数)。したがって、他の本は 65 ページではありません。これはバグではありません。
特徴
1.プロセス全体でバックエンドに触れる必要がなく、フロントエンドは独立できます（私は長い間完全な例を探していました）。 2. ブートストラップのページネーションを使用してページ番号を作成し、パネルを使用して結果を配置するパネルを作成します。
コードは次のとおりです
<!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
-->ajaxを使用してフォームを送信し、ファイルアップロードを実装する方法
Ajaxがjson形式のデータをバックグラウンドに送信するときにエラーに対処する方法
以上がAjaxとDouban検索を組み合わせてページングを実装する方法（コード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
