首頁 > web前端 > js教程 > 主體

怎麼實現不刷新的Ajax分頁

php中世界最好的语言
發布: 2018-04-04 13:37:35
原創
973 人瀏覽過

這次帶給大家怎麼實現不刷新的Ajax分頁,實作不刷新Ajax分頁的注意事項有哪些,下面就是實戰案例,一起來看一下。

緊接著上篇—分頁技術原理與實現之Java+Oracle程式碼實現分頁(二) ,本篇繼續分析分頁技術。上篇講的是分頁技術的程式碼實現,這篇繼續分析分頁技術的效果控制。
上篇已經用程式碼簡單的實作了一個分頁。但我們都看到,程式碼中每次透過servlet請求取得結果集後,都會轉向到一個jsp頁面顯示結果,這樣每次查詢頁面都會刷新一下,例如查詢出現結果集後要查看第三頁,頁面就會刷新一下。這樣頁面給人的效果感覺就會有點不舒服,所以我們希望能夠在通過條件查詢結果集後無論訪問哪一頁,頁面都不會刷新,而只是結果集變化。要解決這個,我想大家很容易就會想到Ajax了。
是啊,這就要請Ajax出山了。當透過查詢條件查詢到結果集後,以後每次訪問任何一頁都透過Ajax來訪問,使用異步Ajax與Servlet進行交互,將結果查詢出來返回給Ajax,這樣頁面內容因為Ajax返回結果而改變,而卻頁面不會刷新,這就實現了無刷新的分頁技術。
下面我們來看一個簡單的無刷新分頁實現,程式碼如下:



 
 
 
 JavaScript" src="../lib/jQuery/jquery.min.js" mce_src="lib/jquery/jquery.min.js">
 
 
 
 Pagination
 
   

  jQuery Pagination Plugin Demo  

 

 

 
 

  This content will be replaced when pagination inits.  

 

  

   Globally maximize granular "outside the box" thinking vis-a-vis    quality niches. Proactively formulate 24/7 results whereas 2.0    catalysts for change. Professionally implement 24/365 niches rather    than client-focused users.   

  

   Competently engineer high-payoff "outside the box" thinking through    cross functional benefits. Proactively transition intermandated    processes through open-source niches. Progressively engage    maintainable innovation and extensible interfaces.   

  

  

  

   Credibly fabricate e-business models for end-to-end niches.    Compellingly disseminate integrated e-markets without ubiquitous    services. Credibly create equity invested channels with    multidisciplinary human capital.   

  

   Interactively integrate competitive users rather than fully tested    infomediaries. Seamlessly initiate premium functionalities rather    than impactful architectures. Rapidiously leverage existing    resource-leveling processes via user-centric portals.   

  

  

  

   Monotonectally initiate unique e-services vis-a-vis client-centric    deliverables. Quickly impact parallel opportunities with B2B    bandwidth. Synergistically streamline client-focused    infrastructures rather than B2C e-commerce.   

  

   Phosfluorescently fabricate 24/365 e-business through 24/365 total    linkage. Completely facilitate high-quality systems without    stand-alone strategic theme areas.   

  

 

 
登入後複製

這就是一個非常簡單的無刷新分頁實現,使用了JQuery+ jquery.pagination框架。現在隨著框架的流行,尤其是Jquery的流行,使用框架來開發是非常有效的。上面程式碼原理在程式碼中已有註釋,也可參考Jquery的官方網站:。
現在就可以來開發我們的Ajax無刷新分頁實作。基於上面的原理,在回應頁碼被按下的程式碼中pageselectCallback(),我們使用一個Ajax非同步存取資料庫,透過點擊的頁號將結果集取出後再用非同步設定到頁面,這樣就可以完成了無刷新實現。

頁碼被按下的回應函數pageselectCallback()修改如下: 

#這樣就可以用非同步方式取得結果,用showResponse函數來處理結果了,showResponse函數如下:

function showResponse(request){
   var content = request;
   var root = content.documentElement;
   var responseNodes = root.getElementsByTagName("root");
   var itemList = new Array();
   var pageList=new Array();
   alert(responseNodes.length);
   if (responseNodes.length > 0) {
    var responseNode = responseNodes[0];
    var itemNodes = responseNode.getElementsByTagName("data");
    for (var i=0; i 0 && nameNodes.length > 0&&sexNodes.length > 0&& ageNodes.length > 0) {
      var id=idNodes[0].firstChild.nodeValue;
      var name = nameNodes[0].firstChild.nodeValue;
      var sex = sexNodes[0].firstChild.nodeValue;
      var age=ageNodes[0].firstChild.nodeValue;
      itemList.push(new Array(id,name, sex,age));
     }
    }
    
    var pageNodes = responseNode.getElementsByTagName("pagination");
    if (pageNodes.length>0) {
     var totalNodes = pageNodes[0].getElementsByTagName("total");
     var startNodes = pageNodes[0].getElementsByTagName("start");
     var endNodes=pageNodes[0].getElementsByTagName("end");
     var currentNodes=pageNodes[0].getElementsByTagName("pageno");
     if (totalNodes.length > 0 && startNodes.length > 0&&endNodes.length > 0) {
      var total=totalNodes[0].firstChild.nodeValue;
      var start = startNodes[0].firstChild.nodeValue;
      var end = endNodes[0].firstChild.nodeValue;
      var current=currentNodes[0].firstChild.nodeValue;
      pageList.push(new Array(total,start,end,current));
     }
    }
   }
   showTable(itemList,pageList);
  }
登入後複製

如上程式碼就是用來處理透過Ajax非同步請求Servlet後傳回的XML格式的結果,其中Servlet程式碼在上篇中。其中itemList、pageList分別是解析回傳後產生的使用者List和分頁導航,這樣使用者就可以以自己的展現方式展現資料了。

function pageselectCallback(page_index, jq){
  var pars="pageNo="+(page_index+1);
   $.ajax({
    type: "POST",
   url: " UserBasicSearchServlet",
   cache: false,
   data: pars,
   success: showResponse
  });
    return false;
}
登入後複製

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

AjaxToolKit怎麼使用Rating控制項

##jQuery+ajax怎麼實作json資料的遍歷

以上是怎麼實現不刷新的Ajax分頁的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!