AjaxとDouban検索を組み合わせてページングを実装する方法（コード添付）

今回は、Ajax と Douban Search を組み合わせてページングを実装する方法を説明します (コードは添付されています)。Ajax と Douban Search を組み合わせてページングを実装する場合の 注意事項について説明します。

Douban API を使用してページ分割された結果を取得します。バックエンド データベースから取得された結果と同等です。違いは、ページ数を事前に知る方法がないことです。総ページ数は API をリクエストすることで取得できますが、Ajax は非同期であるため、ページングの開始時に総ページ数を与えるのは意味がありません。固定の総ページ数 65 を使用しました (正確に、

javascriptbooks の検索によって返される総ページ数)。したがって、他の本は 65 ページではありません。これはバグではありません。

特徴

1.プロセス全体でバックエンドに触れる必要がなく、フロントエンドは独立できます（私は長い間完全な例を探していました）。

2. ブートストラップのページネーションを使用してページ番号を作成し、パネルを使用して結果を配置するパネルを作成します。

コードは次のとおりです

nbsp;html>

  
    <meta>
    <title></title>
    <link><!-- 换成自己的目录 -->
    <meta>
  
  <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>
  
   <p>
    </p><p>
     </p><p>
      </p><p>
       </p>

                           搜索                 

             

       

                                                                                             

书名	作者	出版日期	平均分	价格

                 

     

      

           

      

                        GO               

               

          <script></script>   <script></script>   <script> var partPageModule = ( function ( $ ) { var initPager = null,// 初始换分页函数 setPagerHTML = null,// 生成分的页HTML代码 pageClick = null,//　每一页按钮的点击事件 ajax = null, // ajax请求后台数据 renderButton = null, $content = $( &#39;&#39; ) // 动态生成的页码 ; /* 功能：完成初始化 * @totalPages 总页数，从后端获取 * @currentPage 当前所在的页数 */ initPager = function ( totalPages, currentPage ) { $content = setPagerHTML({ currentPage: currentPage, totalPages: totalPages, pageClick: PageClick }) $( &#39;#test&#39; ).empty().append( $content );// 得到分页后添加到#test $( &#39;#jumpToPage&#39; ).click( function ( e ) {// 绑定GO按钮的点击事件 e.preventDefault(); PageClick( totalPages, $(&#39;#page&#39;).val() * 1); }) $( &#39;#page&#39; ).keyup( function ( e ) {// Enter键绑定搜索事件 if ( e.keyCode === 13 ) { $( &#39;#jumpToPage&#39;).trigger( &#39;click&#39; ); } }) $( &#39;#result&#39; ).html( &#39;你点击的是第&#39; + currentPage + &#39;页&#39;) }; /* 功能：页码点击事件。重新生成所有页码，并且使用ajax获取数据 */ PageClick = function ( totalPages, currentPage ) { initPager( totalPages, currentPage ); ajax( currentPage );// 使用jsonp请求豆瓣 } ajax = function ( currentPage ) { var $input = $( &#39;#bookName&#39; ), bookName = &#39;&#39;, $tbody = $( &#39;#tbody&#39; ) // totalPages ; bookName = $input.val(); if ( !bookName ) { // 如果没有输入，就不要发送请求了 $input.focus(); return; } else { $.ajax({ type: &#39;get&#39;, url: &#39;https://api.douban.com/v2/book/search&#39;,// 豆瓣图书api dataType: &#39;jsonp&#39;, data: { q: bookName, start: ( parseInt( currentPage )-1 )*20 || 0 }, success: function ( data ) { var html = &#39;&#39;, books = data.books ; // totalPages = Math.ceil( data.total / data.count ); books.forEach( function ( value, index ) { html += &#39;<tr>&#39; + &#39;<td><a href="&#39; + value.alt + &#39;">&#39; + value.title + &#39;&#39; + &#39;<td>&#39; + value.author + &#39;&#39; + &#39;<td>&#39; + value.pubdate + &#39;&#39; + &#39;<td>&#39; + value.rating.average + &#39;&#39; + &#39;<td>&#39; + value.price + &#39;&#39; + &#39;&#39;; }) $tbody.html( html ); } }) } // return totalPages; } setPagerHTML = function ( options ) { var currentPage = options.currentPage, totalPages = options.totalPages, pageClick = options.pageClick, $content = $(&#39;<ul class="pagination">&#39;), startPage = 1, nextPage = currentPage + 1,//不需要考虑超出问题，后面有条件 prevPage = currentPage - 1 ; /* 逻辑处理，根据点击的不同的页生成不同的ul */ if ( currentPage == startPage ) {//当前页是起始页 $content.append( &#39;<li><span>首页&#39; ); // 首页不可用 $content.append( &#39;<li><span>上一页&#39; ); // 上一页不可用 } else { // 不是起始页 $content.append( renderButton( totalPages, 1, pageClick, &#39;首页&#39;) ); // 生成首页并绑定事件 $content.append( renderButton( totalPages, prevPage, pageClick, &#39;上一页&#39;) ); // 生成上一页并绑定事件 } if ( totalPages <=5 && currentPage <= 5 ) {// 总页数小于5，当前页小于5，全部生成页码 for ( var i = 1; i <= totalPages; i++ ) { if( i === currentPage ) { $content.append( &#39;<li class="active><span>&#39; + i + &#39;&#39; );// 当前页不可点击 } else { $content.append( renderButton( totalPages, i, pageClick, i) );// 其他页可以点击 } } } else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 总页数大于5，当前页接近总页数，前面显示...,后面显示到结尾的页码 $content.append( &#39;<li><span>...&#39; ); for( var i = totalPages - 4; i <= totalPages; i++ ) { if ( i === currentPage ) { $content.append( &#39;<li class="active"><span>&#39; + i + &#39;&#39; ); } else { $content.append( renderButton( totalPages, i, pageClick, i) ); } } } else if ( totalPages > 5 && currentPage > 3) {// 总页数大于5，当前页在中间，前后生成...，生成中间页码 $content.append( &#39;<li><span>...&#39; ); for ( var i = currentPage - 2; i < currentPage + 2; i++ ) { if ( i === currentPage ) { $content.append( &#39;<li class="active"><span>&#39; + i + &#39;&#39; ); } else { $content.append( renderButton( totalPages, i ,pageClick, i) ); } } $content.append( &#39;<li><span>...&#39; ); } else if ( totalPages > 5 && currentPage <= 3 ) {// 总页数大于5，当前页接近第一页，显示前面页码，后面显示... for ( var i = 1; i <= 5; i++ ) { if ( i === currentPage ) { $content.append( &#39;<li class="active"><span>&#39; + i + &#39;&#39; ); } else { $content.append( renderButton( totalPages, i ,pageClick, i) ); } } $content.append( &#39;<li><span>...&#39; ); } if ( currentPage == totalPages ) {//当前页是末页 $content.append( &#39;<li><span>下一页&#39; ); // 下一页不可用 $content.append( &#39;<li><span>末页&#39; ); // 末页不可用 } else { // 不是起始页 $content.append( renderButton( totalPages, nextPage, pageClick, &#39;下一页&#39;) ); // 生成首页并绑定事件 $content.append( renderButton( totalPages, totalPages, pageClick, &#39;末页&#39;) ); // 生成上一页并绑定事件 } return $content; } renderButton = function ( totalPages, goPageIndex, eventHander, text ) { var $gotoPage = $( &#39;<li><a title="第&#39; + goPageIndex + &#39;页">&#39; + text + &#39;&#39; ); $gotoPage.click( function () { eventHander( totalPages, goPageIndex ); }) return $gotoPage; } return { init: initPager, ajax: ajax }　 }(jQuery)) $( function () { $( &#39;#search&#39; ).click( function ( e ) { e.preventDefault(); var totalPage = partPageModule.ajax(1);// 由于ajax是异步的， totalPage = totalPage || 65;// 所以这个总页数是不准确的。一般这个数据是后端返回的。这里的65是javascript搜索的页数，不同的书籍搜索结果不一样，由于ajax异步执行，所以这里会默认为65。这里不是bug。 partPageModule.init( totalPage, 1 ); }) $( &#39;#bookName&#39; ).keyup( function ( e ) { if ( e.keyCode === 13 ) { $( &#39;#search&#39; ).trigger( &#39;click&#39; ); } }) $( &#39;#search&#39; ).trigger( &#39;click&#39; ); }) </script>    この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ajaxを使用してフォームを送信し、ファイルアップロードを実装する方法

Ajaxがjson形式のデータをバックグラウンドに送信するときにエラーに対処する方法

以上がAjaxとDouban検索を組み合わせてページングを実装する方法（コード添付）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。