`
Cindy_Lee
  • 浏览: 110642 次
  • 性别: Icon_minigender_1
  • 来自: 武汉人在北京
社区版块
存档分类
最新评论

ajax分页

    博客分类：
  • ajax
AjaxStrutsJSPApacheCSS 
阅读更多

最近做了个用ajax分页的简单例子，供一些初学者参看，事先声明，本人也是初学者，写的不好，也很粗略，请见谅啊

我是以最简单的 商品列表为例子（商品名，商品价格，商品图片）数据库用的是My Sql 并运用了struts,hibernate

------------------------------------------------------------------------

jsp页面（main.jsp）：

<%@ page language="java" pageEncoding="utf-8" import="java.util.List,com.fy.pojo.Goods"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
  <%
   String temp = (String)request.getAttribute("temp");
   if(temp == null || "".equals(temp)){
     response.sendRedirect("/ajaxFY/main.do?method=getCount");
   }else{
   List goodsList = (List)request.getAttribute("goodsList");
   int count = (Integer)request.getAttribute("count");
   int pageCount =  (count-1)/3+1;
   Goods goods = null;
  %>
  <head>
 
    <html:base />
   
    <title>main.jsp</title>

 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->
  </head>
 <script type="text/javascript">
 var xhr;
 var pageCount;
 var nowPage = 1;
 function createXHR()
 {
  if(window.ActiveXObject)
  {
   try{
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
   }catch(e)
   {
    xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
   }
  }else if(window.XMLHttpRequest)
  {
   xhr = new XMLHttpRequest();
  }
 }
 //得到首页商品信息
 function getFirst()
 {
   nowPage = 0;
   var firstResult = (nowPage-1)*3;
   //创建XMLHttpRequest对象
   createXHR();
   var url="main.do?method=getGoods&firstResult="+firstResult;
   xhr.open("POST",url,true);
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   xhr.onreadystatechange=page;
   xhr.send(null);
 }
 //得到尾页商品信息
 function getEnd()
 {
   nowPage = pageCount;
   var firstResult = (nowPage-1)*3;
   //创建XMLHttpRequest对象
   createXHR();
   var url="/ajaxFY/main.do?method=getGoods&firstResult="+firstResult;
   xhr.open("POST",url,true);
   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   xhr.onreadystatechange=page;
   xhr.send(null);
 }
 //得到上一页商品信息
 function getUp()
 {
   if(nowPage-1<1){
    alert("已经是首页了！");
   }else{
    nowPage--;
    var firstResult = (nowPage-1)*3;
    //创建XMLHttpRequest对象
    createXHR();
    var url="/ajaxFY/main.do?method=getGoods&firstResult="+firstResult;
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.onreadystatechange=page;
    xhr.send(null);
   }
   
 }
 //得到下一页商品信息
 function getDown()
 {
   if(nowPage == pageCount){
    alert("已经是尾页了！");
   }else{
    nowPage++;
    var firstResult = (nowPage-1)*3;
    //创建XMLHttpRequest对象
    createXHR();
    var url="/ajaxFY/main.do?method=getGoods&firstResult="+firstResult;
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.onreadystatechange=page;
    xhr.send(null);
   }
 }
 //得到指定页数商品信息
 function getCountPage()
 {
   var selPage = document.getElementById("sel").value;
   if(selPage == 0){
    
   }else{
    nowPage = selPage;
    var firstResult = (nowPage-1)*3;
    //创建XMLHttpRequest对象
    createXHR();
    var url="/ajaxFY/main.do?method=getGoods&firstResult="+firstResult;
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.onreadystatechange=page;
    xhr.send(null);
   }
   
 }
 function page()
 {
  //请求成功
  if(xhr.readyState==4)
  {
   //相应成功
   if(xhr.status==200)
   {
    //获得响应文本
    var resptext = xhr.responseText;
    //根据响应的文本来判断用户名的状态
    document.getElementById("dd").innerHTML=resptext;
   }else{
    alert("请求出现异常!");
   }
  }
 }
 
 function setPageCount(count){
  pageCount = count;
 }
 </script>
<body onload="setPageCount(<%=pageCount %>)">
   <h1>ajax分页实例</h1>
 <strong>  共有<%=count %>页</strong><hr>
    <div id="dd">
     <%for(int i=0;i<goodsList.size();i++){
      goods = (Goods)goodsList.get(i);
     %>
     <table>
      <tr>
       <td>商品名：</td>
       <td><%=goods.getGoodsName() %></td>
      </tr>
      <tr>
       <td>商品价格：</td>
       <td>$<%=goods.getPrice() %></td>
      </tr>
      <tr>
       <td >商品图片：</td>
       <td><img src="/ajaxFY/picture/<%=goods.getPicture() %>" height="100" width="100"></img>  </td>
      </tr>
     </table><hr>
     <%} %>
    </div>
    <input type="button" value="首页" onclick="getFirst()"></input>
    <input type="button" value="上一页" onclick="getUp()"></input>
    <select id="sel" onchange="getCountPage()">
     <option selected="selected" value="0">请选择页数</option>
     <%for(int i=1;i<=pageCount;i++){ %>
      <option value="<%=i%>">第<%=i%>页</option>
     <%} %>
    </select>
     <input type="button" value="下一页" onclick="getDown()"></input>
    <input type="button" value="尾页" onclick="getEnd()"></input>
  </body>
  <%} %>
</html:html>
-----------------------------------------------------

action（MainAction）：

/**
  * 得到商品的数量
  * @param mapping
  * @param form
  * @param request
  * @param response
  * @return
  */
 public ActionForward getCount(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) {
  int count = goodsService.getCount();
  List goodsList = goodsService.getGoods(0,3);
  request.setAttribute("temp", "temp");
  request.setAttribute("count", count);
  request.setAttribute("goodsList", goodsList);
  return new ActionForward("/main.jsp");
 }

 

/**
  * 得到商品
  * @param mapping
  * @param form
  * @param request
  * @param response
  * @return
  */
 public ActionForward getGoods(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response) {
  int firstResult = Integer.parseInt(request.getParameter("firstResult"));
  List goodsList = goodsService.getGoods(firstResult,3);
  Goods goods = null;
  PrintWriter out = null;
  response.setCharacterEncoding("utf-8");
  try {
   out = response.getWriter();
  } catch (IOException e1) {
   e1.printStackTrace();
  }
  for(int i=0;i<goodsList.size();i++){
   goods = (Goods)goodsList.get(i);
   out.print("<table>");
   out.print("<tr>");
   out.print("<td>商品名：</td>"); 
   out.print("<td>"+goods.getGoodsName()+"</td>"); 
   out.print("</tr>");
   out.print("<tr>");
   out.print("<td>商品价格：</td>"); 
   out.print("<td>$"+goods.getPrice()+"</td>"); 
   out.print("</tr>");
   out.print("<tr>");
   out.print("<td >商品图片：</td>"); 
   out.print("<td><img src='/ajaxFY/picture/"+goods.getPicture() +"' height='100' width='100'></img></td>"); 
   out.print("</tr>");
   out.print("</table><hr>");
  }
  out.flush();
  out.close();
  return null;
 }
}

 

分享到：
评论
1 楼 云栖竹径 2011-08-31  
谢谢你了~
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics