ajax结合豆瓣搜索进行分页如何实现（附代码）

这次给大家带来ajax结合豆瓣搜索进行分页如何实现（附代码），ajax结合豆瓣搜索进行分页实现的注意事项有哪些，下面就是实战案例，一起来看一下。

使用豆瓣api，得到分页结果。相当于从后台数据库获得的结果一样。所不同的是，没法事先知道页数。虽然通过请求api可以获得总页数，但由于ajax是异步的，所以对于分页一开始就要给出总页数来说，这是没有意义的。我使用了一个固定总页数65（正是搜索javascript书籍返回的总页数）。所以其他书籍是并不是65页，会出现多页或者少页的情况，这并不是bug。

特点

　　1，全程不需要接触后台，前端独立就可以（我找过好长时间都没找过完整的例子）。
　　2，使用了bootstrap的pagination制作页码和panel制作放置结果的面板。 　　

代码如下

                         .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;   }       
    
     
      
                                搜索                     
      
       
        
         
书名
         
作者
         
出版日期
         
平均分
         
价格
        
        
        
       
      
     
    
     
      
     
     
      
                      GO             
     
    
    
    
   
       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 += ''           + '' + value.title + ''           + '' + value.author + ''           + '' + value.pubdate + ''           + '' + value.rating.average + ''           + '' + value.price + ''           + '';        })       $tbody.html( html );      }     })    }//   return totalPages;   }   setPagerHTML = function ( options ) {    var      currentPage = options.currentPage,     totalPages = options.totalPages,     pageClick = options.pageClick,     $content = $('
'),     startPage = 1,     nextPage = currentPage + 1,//不需要考虑超出问题，后面有条件     prevPage = currentPage - 1    ;    /* 逻辑处理，根据点击的不同的页生成不同的ul */    if ( currentPage == startPage ) {//当前页是起始页     $content.append( '
首页
' ); // 首页不可用     $content.append( '
上一页
' ); // 上一页不可用    } 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( '
' + i + '
' );// 当前页不可点击      } else {       $content.append( renderButton( totalPages, i, pageClick, i) );// 其他页可以点击      }     }    } else if ( totalPages > 5 && totalPages - currentPage <= 2 ) {// 总页数大于5，当前页接近总页数，前面显示...,后面显示到结尾的页码     $content.append( '
...
' );     for( var i = totalPages - 4; i <= totalPages; i++ ) {      if ( i === currentPage ) {       $content.append( '
' + i + '
' );      } else {       $content.append( renderButton( totalPages, i, pageClick, i) );      }     }    } else if ( totalPages > 5 && currentPage > 3) {// 总页数大于5，当前页在中间，前后生成...，生成中间页码     $content.append( '
...
' );     for ( var i = currentPage - 2; i < currentPage + 2; i++ ) {      if ( i === currentPage ) {       $content.append( '
' + i + '
' );      } else {       $content.append( renderButton( totalPages, i ,pageClick, i) );      }     }     $content.append( '
...
' );    } else if ( totalPages > 5 && currentPage <= 3 ) {// 总页数大于5，当前页接近第一页，显示前面页码，后面显示...     for ( var i = 1; i <= 5; i++ ) {      if ( i === currentPage ) {       $content.append( '
' + i + '
' );      } else {       $content.append( renderButton( totalPages, i ,pageClick, i) );      }     }     $content.append( '
...
' );    }    if ( currentPage == totalPages ) {//当前页是末页     $content.append( '
下一页
' ); // 下一页不可用     $content.append( '
末页
' ); // 末页不可用    } else { // 不是起始页     $content.append( renderButton( totalPages, nextPage, pageClick, '下一页') ); // 生成首页并绑定事件     $content.append( renderButton( totalPages, totalPages, pageClick, '末页') ); // 生成上一页并绑定事件    }    return $content;   }   renderButton = function ( totalPages, goPageIndex, eventHander, text ) {    var $gotoPage = $( '
' + text + '
' );    $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' );  })   

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

ajax怎样提交form表单与实现文件上传

Ajax向后台传输json格式数据出现错误应如何处理

以上就是ajax结合豆瓣搜索进行分页如何实现（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！