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

ajax分页

    博客分类:
  • ajax
阅读更多

最近做了个用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  
谢谢你了~

相关推荐

    Java Ajax分页,jsp ajax分页

    总结来说,实现Java AJAX分页和JSP分页涉及前后端的协作。前端通过AJAX与后端通信,后端处理请求并从数据库获取数据,然后将数据返回给前端,前端再更新页面内容。这个过程提升了用户体验,使得浏览大数据集变得更加...

    Jquery Ajax分页(有实例)

    **jQuery AJAX分页技术详解** 在Web开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高页面加载速度,优化用户体验。jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和...

    ajax 分页 ajax分页

    **Ajax分页原理:** Ajax分页的基本原理是通过JavaScript异步发送HTTP请求到服务器,请求只获取当前页所需的数据,然后在客户端用JavaScript动态地将这些数据插入到网页中。这样用户可以在浏览页面时保持交互性,而...

    Ajax分页 Asp.net 分页

    在Asp.net中,我们可以使用多种方式实现Ajax分页,如jQuery的Ajax功能、ASP.NET AJAX Control Toolkit中的Paging控件,或者自定义Ajax分页组件。这里我们将主要讨论使用jQuery Ajax和Asp.net MVC或Web Forms的方式。...

    ajax分页视频教程

    **Ajax分页技术详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在网页应用中,分页是一个常见的功能,特别是在数据量庞大的时候,分页可以帮助...

    ajax 分页ajax 分页ajax 分页

    **Ajax 分页技术详解** Ajax(Asynchronous JavaScript and XML)...综上所述,Ajax分页技术是现代Web应用中提高数据加载效率和用户体验的重要手段。通过合理的前端和后端设计,我们可以构建出流畅、高效的分页系统。

    php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页

    php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax分页php+ajax...

    ASP + Ajax 分页实例

    传统的分页通常会加载整个页面,而使用Ajax分页,只需要向服务器请求当前页的数据,然后在客户端动态更新,这样可以显著减少数据传输量,提高页面响应速度。 具体实现步骤可能包括以下几点: 1. **前端准备**:在...

    MVC3的Ajax分页

    在MVC3中实现Ajax分页,可以极大地提高用户体验,因为用户无需等待整个页面刷新,只需要加载分页所需的数据。这种技术主要依赖于JavaScript和jQuery库,以及服务器端的Ajax支持。在这个场景中,我们使用了一个名为`...

    .net mvc3.0分页(包含AJAX分页)

    包含AJAX分页。启用AJAX分页的话请查看我源代码的实例。 具体逻辑请查看我的源代码。很简单的。我相信一般人都能看懂。 分页代码由 Models 里的 INetMvc3Page.cs 和Views\Shared的 _NetMvc3Page.cshtml 两部分代码...

    .net JSON+ajax 分页

    标题中的".net JSON+ajax 分页"涉及到的是在.NET框架下,使用JSON数据格式和Ajax技术来实现网页的动态分页功能。这是一个常见的Web开发需求,尤其是在数据量较大的情况下,为了提高用户体验,避免每次操作都刷新整个...

    jquery ajax 分页 前端

    **jQuery AJAX 分页技术在前端应用详解** 在Web开发中,分页是一种常见的用户界面功能,用于处理大量数据的展示,提高页面加载速度并优化用户体验。本篇文章将深入探讨如何利用jQuery和AJAX技术实现纯前端的分页...

    ASP.NET AJAX分页控件

    ASP.NET AJAX分页控件是一种在Web应用中实现动态、交互式用户体验的关键技术。它结合了ASP.NET的强大功能和AJAX(Asynchronous JavaScript and XML)的异步特性,以提高网页加载速度,优化用户界面,并减少不必要的...

    MVC3.0 无刷新 AJAX 分页 MvcPager

    **MVC3.0无刷新AJAX分页与MvcPager详解** 在Web开发中,用户界面的交互性和响应速度是衡量用户体验的重要因素。MVC3.0(Model-View-Controller)框架是ASP.NET中用于构建可维护和可扩展的Web应用程序的一个强大工具...

    php经典多样式分页类,附带Ajax分页

    实现Ajax分页,通常需要以下几个步骤: 1. 创建前端事件监听器:监听分页链接或按钮的点击事件。 2. 发送Ajax请求:当用户点击分页链接时,向服务器发送包含当前页码的Ajax请求。 3. 处理服务器响应:服务器接收到...

    jquery+ajax分页(新)

    通过结合jQuery的事件处理、AJAX异步请求和Spring MVC的控制器,我们可以实现一个高效的AJAX分页系统。用户可以在不刷新页面的情况下浏览不同页的数据,从而提升Web应用的性能和用户体验。同时,MySQL作为关系型...

    jquery+ajax分页

    通过以上步骤,我们可以实现一个基本的jQuery + AJAX分页功能。在实际项目中,根据需求可能还需要考虑更多细节,如分页大小的调整、搜索和排序功能的集成等。总的来说,jQuery与AJAX的结合极大地提高了Web应用的交互...

    一个ajax分页的公共类

    这个“一个ajax分页的公共类”提供了一个通用的解决方案,可以被多个页面或项目复用,减少了重复代码,提高了开发效率。 1. **Ajax基础** Ajax的核心是通过JavaScript创建XMLHttpRequest对象,向服务器发送异步...

Global site tag (gtag.js) - Google Analytics