最近做了个用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 οnlοad="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="首页" οnclick="getFirst()"></input>
<input type="button" value="上一页" οnclick="getUp()"></input>
<select id="sel" οnchange="getCountPage()">
<option selected="selected" value="0">请选择页数</option>
<%for(int i=1;i<=pageCount;i++){ %>
<option value="<%=i%>">第<%=i%>页</option>
<%} %>
</select>
<input type="button" value="下一页" οnclick="getDown()"></input>
<input type="button" value="尾页" οnclick="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;
}
}