ajax結合豆瓣搜尋結果進行分頁完整代碼-js教程-PHP中文網

首頁

web前端

js教程

ajax結合豆瓣搜尋結果進行分頁完整代碼

韦小宝

Dec 30, 2017 pm 08:12 PM

ajax 搜尋結果進行

這篇文章主要為大家詳細介紹了ajax結合豆瓣搜尋結果進行分頁完整程式碼，具有一定的參考學習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 = $( &#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;</a></td>&#39;
           + &#39;<td>&#39; + value.author + &#39;</td>&#39;
           + &#39;<td>&#39; + value.pubdate + &#39;</td>&#39;
           + &#39;<td>&#39; + value.rating.average + &#39;</td>&#39;
           + &#39;<td>&#39; + value.price + &#39;</td>&#39;
           + &#39;</tr>&#39;; 
       })

       $tbody.html( html );
      }
     })
    }

//   return totalPages;
   }

   setPagerHTML = function ( options ) {
    var 
     currentPage = options.currentPage,
     totalPages = options.totalPages,
     pageClick = options.pageClick,
     $content = $(&#39;<ul class="pagination"></ul>&#39;),
     startPage = 1,
     nextPage = currentPage + 1,//不需要考虑超出问题，后面有条件
     prevPage = currentPage - 1
    ;

    /* 逻辑处理，根据点击的不同的页生成不同的ul */
    if ( currentPage == startPage ) {//当前页是起始页
     $content.append( &#39;<li><span>首页</span></li>&#39; ); // 首页不可用
     $content.append( &#39;<li><span>上一页</span></li>&#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;</span></li>&#39; );// 当前页不可点击
      } else {
       $content.append( renderButton( totalPages, i, pageClick, i) );// 其他页可以点击
      }
     }
    } else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 总页数大于5，当前页接近总页数，前面显示...,后面显示到结尾的页码
     $content.append( &#39;<li><span>...</span></li>&#39; );
     for( var i = totalPages - 4; i <= totalPages; i++ ) {
      if ( i === currentPage ) {
       $content.append( &#39;<li class="active"><span>&#39; + i + &#39;</span></li>&#39; );
      } else {
       $content.append( renderButton( totalPages, i, pageClick, i) );
      }
     }
    } else if ( totalPages > 5 && currentPage > 3) {// 总页数大于5，当前页在中间，前后生成...，生成中间页码
     $content.append( &#39;<li><span>...</span></li>&#39; );
     for ( var i = currentPage - 2; i < currentPage + 2; i++ ) {
      if ( i === currentPage ) {
       $content.append( &#39;<li class="active"><span>&#39; + i + &#39;</span></li>&#39; );
      } else {
       $content.append( renderButton( totalPages, i ,pageClick, i) );
      }
     }
     $content.append( &#39;<li><span>...</span></li>&#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;</span></li>&#39; );
      } else {
       $content.append( renderButton( totalPages, i ,pageClick, i) );
      }
     }
     $content.append( &#39;<li><span>...</span></li>&#39; );
    }

    if ( currentPage == totalPages ) {//当前页是末页
     $content.append( &#39;<li><span>下一页</span></li>&#39; ); // 下一页不可用
     $content.append( &#39;<li><span>末页</span></li>&#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;</a></li>&#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>
  </body>
</html>
<!-- https://api.douban.com/v2/book/search -->
<!--
 参数    意义        备注
 q    查询关键字      q和tag必传其一
 tag   查询的tag      q和tag必传其一
 start  取结果的offset   默认为0
 count  取结果的条数     默认为20，最大为100
-->

登入後複製

以上就是本章的所有內容了，希望對大家有所幫助！

相關推薦：

jQuery實作搜尋功能並顯示搜尋相關內容

JS實現靜態頁面搜尋並高亮顯示

javascript仿淘寶搜尋框輸入事件的實作

以上是ajax結合豆瓣搜尋結果進行分頁完整代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM

標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資

解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤

如何使用Ajax從PHP方法取得變數？ Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：

如何解決jQuery AJAX報錯403的問題？ Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使

微軟必應利用人工智慧產生搜尋結果標題，提升搜尋效率 Nov 17, 2023 pm 06:53 PM

微軟必應搜尋引擎現在能夠使用人工智慧為某些搜尋結果產生標題。該功能採用了GPT-4技術，旨在提供更相關和有資訊量的搜尋結果，幫助用戶更快地找到他們想要的網站IT之家注意到，如果用戶搜尋某個關鍵字，然後點擊搜尋結果中的標題連結旁邊的向下箭頭，可以看到一些結果上標有「AI-GeneratedCaption（人工智慧產生的標題）」。必應稱，它使用GPT-4來生成這些人工智能標題，通過分析用戶的搜索關鍵字，然後“從網頁中提取最相關的信息，並巧妙地將其轉化為高度相關且易於理解的摘要” ，必應寫道，「生成的標

PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

PHP 與 Ajax：建立動態載入內容的解決方案 Jun 06, 2024 pm 01:12 PM

Ajax（非同步JavaScript和XML）允許在不重新載入頁面情況下新增動態內容。使用PHP和Ajax，您可以動態載入產品清單：HTML建立一個帶有容器元素的頁面，Ajax請求載入資料後將資料加入到該元素中。 JavaScript使用Ajax透過XMLHttpRequest向伺服器傳送請求，從伺服器取得JSON格式的產品資料。 PHP使用MySQL從資料庫查詢產品數據，並將其編碼為JSON格式。 JavaScript解析JSON數據，並將其顯示在頁面容器中。點選按鈕觸發Ajax請求，載入產品清單。

PHP 與 Ajax：提升 Ajax 安全性的方法 Jun 01, 2024 am 09:34 AM

為了提升Ajax安全性，有幾種方法：CSRF保護：產生令牌並將其傳送到客戶端，在請求中新增至伺服器端進行驗證。 XSS保護：使用htmlspecialchars()過濾輸入，防止惡意腳本注入。 Content-Security-Policy頭：限制惡意資源加載，指定允許載入腳本和樣式表的來源。驗證伺服器端輸入：驗證從Ajax請求接收的輸入，防止攻擊者利用輸入漏洞。使用安全Ajax函式庫：利用jQuery等函式庫提供的自動CSRF保護模組。

See all articles

ajax結合豆瓣搜尋結果進行分頁完整代碼

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題