怎么实现不刷新的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 학습자의 빠른 성장을 도와주세요!