溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何使用ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁(yè)

發(fā)布時(shí)間：2021-09-14 11:23:00 來(lái)源：億速云 閱讀：143 作者：小新 欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)如何使用ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁(yè)的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

使用豆瓣api，得到分頁(yè)結(jié)果。相當(dāng)于從后臺(tái)數(shù)據(jù)庫(kù)獲得的結(jié)果一樣。所不同的是，沒(méi)法事先知道頁(yè)數(shù)。雖然通過(guò)請(qǐng)求api可以獲得總頁(yè)數(shù)，但由于ajax是異步的，所以對(duì)于分頁(yè)一開(kāi)始就要給出總頁(yè)數(shù)來(lái)說(shuō)，這是沒(méi)有意義的。我使用了一個(gè)固定總頁(yè)數(shù)65（正是搜索javascript書(shū)籍返回的總頁(yè)數(shù)）。所以其他書(shū)籍是并不是65頁(yè)，會(huì)出現(xiàn)多頁(yè)或者少頁(yè)的情況，這并不是bug。

特點(diǎn)

1、全程不需要接觸后臺(tái)，前端獨(dú)立就可以（我找過(guò)好長(zhǎng)時(shí)間都沒(méi)找過(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)輸入書(shū)名" 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>書(shū)名</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 ) { // 如果沒(méi)有輸入，就不要發(fā)送請(qǐng)求了
  $input.focus();
  return;
 } else {
  $.ajax({
  type: 'get',
  url: 'https://api.douban.com/v2/book/search',// 豆瓣圖書(shū)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,//不需要考慮超出問(wèn)題，后面有條件
  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ù)，不同的書(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 查詢(xún)關(guān)鍵字  q和tag必傳其一
 tag 查詢(xún)的tag  q和tag必傳其一
 start 取結(jié)果的offset 默認(rèn)為0
 count 取結(jié)果的條數(shù)  默認(rèn)為20，最大為100
-->

感謝各位的閱讀！關(guān)于“如何使用ajax結(jié)合豆瓣搜索結(jié)果進(jìn)行分頁(yè)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手