Heim >Web-Frontend >js-Tutorial >Ajax kombiniert mit Douban-Suchergebnissen für das Paging des vollständigen Codes
Ajax kombiniert mit Douban-Suchergebnissen für das Paging des vollständigen Codes
- 韦小宝Original
- 2017-12-30 20:12:112256Durchsuche
Dieser Artikel stellt hauptsächlich den vollständigen Code von Ajax in Kombination mit den Douban-Suchergebnissen für das Paging vor. Er hat einen gewissen Referenzwert für das Erlernen von Ajax. Freunde, die sich für Ajax interessieren, können sich auf
Verwenden der Douban-API beziehen , Erhalten Sie paginierte Ergebnisse. Entspricht den aus der Backend-Datenbank erhaltenen Ergebnissen. Der Unterschied besteht darin, dass es keine Möglichkeit gibt, die Anzahl der Seiten im Voraus zu kennen. Obwohl die Gesamtseitenzahl durch Anfordern der API ermittelt werden kann, ist es nicht sinnvoll, die Gesamtseitenzahl zu Beginn der Paginierung anzugeben, da Ajax asynchron ist. Ich habe eine feste Gesamtseitenzahl von 65 verwendet (genau die Gesamtzahl der Seiten, die bei der Suche nach Javascript-Büchern zurückgegeben werden). Daher sind andere Bücher nicht 65 Seiten lang. Dies ist kein Fehler.
Funktionen
1. Im gesamten Prozess muss das Backend nicht berührt werden, das Frontend kann unabhängig sein (ich habe nach einem vollständigen Beispiel gesucht). für eine lange Zeit).
2. Verwenden Sie die Paginierung von bootstrap, um Seitenzahlen zu erstellen, und Panel, um ein Panel zum Platzieren von Ergebnissen zu erstellen.
Der Code lautet wie folgt
<!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
-->Das Obige ist der gesamte Inhalt Ich hoffe, dass dieses Kapitel für alle hilfreich ist!
Verwandte Empfehlungen:
jQuery implementiert die Suchfunktion und zeigt suchbezogene Inhalte an
JS-Implementierung Statische Seitensuche und -hervorhebung
Implementierung eines JavaScript-imitierten Taobao-Suchfeld-Eingabeereignisses
Das obige ist der detaillierte Inhalt vonAjax kombiniert mit Douban-Suchergebnissen für das Paging des vollständigen Codes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ein einfaches Beispiel für den domänenübergreifenden Aufruf von WebService mit jsNächster Artikel：Ein einfaches Beispiel für den domänenübergreifenden Aufruf von WebService mit js
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse