web开发中如何实现无刷新的Ajax分页技术

这篇文章主要介绍web开发中如何实现无刷新的Ajax分页技术,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联公司专注于夏邑企业网站建设,自适应网站建设,购物商城网站建设。夏邑网站建设公司,为夏邑等地区提供建站服务。全流程定制制作,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务

代码如下:



 
 
 
 JavaScript" src="../lib/jQuery/jquery.min.js" mce_src="lib/jquery/jquery.min.js">
 
 
 * {
 padding: 0;
 margin: 0;
}

body {
 background-color: #fff;
 margin: 20px;
 padding: 0;
 height: 100%;
 font-family: Arial, Helvetica, sans-serif;
}

#Searchresult {
 margin-top: 15px;
 margin-bottom: 15px;
 border: solid 1px #eef;
 padding: 5px;
 background: #eef;
 width: 40%;
}

#Searchresult p {
 margin-bottom: 1.4em;
}
 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;
}

以上是“web开发中如何实现无刷新的Ajax分页技术”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


分享名称:web开发中如何实现无刷新的Ajax分页技术
本文路径:http://ybzwz.com/article/igsjei.html

其他资讯