最近做了个用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;
}
}
分享到:
相关推荐
总结来说,实现Java AJAX分页和JSP分页涉及前后端的协作。前端通过AJAX与后端通信,后端处理请求并从数据库获取数据,然后将数据返回给前端,前端再更新页面内容。这个过程提升了用户体验,使得浏览大数据集变得更加...
**jQuery AJAX分页技术详解** 在Web开发中,分页是一种常见的数据展示方式,它能够有效地组织大量数据,提高页面加载速度,优化用户体验。jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和...
**Ajax分页原理:** Ajax分页的基本原理是通过JavaScript异步发送HTTP请求到服务器,请求只获取当前页所需的数据,然后在客户端用JavaScript动态地将这些数据插入到网页中。这样用户可以在浏览页面时保持交互性,而...
在Asp.net中,我们可以使用多种方式实现Ajax分页,如jQuery的Ajax功能、ASP.NET AJAX Control Toolkit中的Paging控件,或者自定义Ajax分页组件。这里我们将主要讨论使用jQuery Ajax和Asp.net MVC或Web Forms的方式。...
**Ajax分页技术详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在网页应用中,分页是一个常见的功能,特别是在数据量庞大的时候,分页可以帮助...
**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...
传统的分页通常会加载整个页面,而使用Ajax分页,只需要向服务器请求当前页的数据,然后在客户端动态更新,这样可以显著减少数据传输量,提高页面响应速度。 具体实现步骤可能包括以下几点: 1. **前端准备**:在...
在MVC3中实现Ajax分页,可以极大地提高用户体验,因为用户无需等待整个页面刷新,只需要加载分页所需的数据。这种技术主要依赖于JavaScript和jQuery库,以及服务器端的Ajax支持。在这个场景中,我们使用了一个名为`...
包含AJAX分页。启用AJAX分页的话请查看我源代码的实例。 具体逻辑请查看我的源代码。很简单的。我相信一般人都能看懂。 分页代码由 Models 里的 INetMvc3Page.cs 和Views\Shared的 _NetMvc3Page.cshtml 两部分代码...
标题中的".net JSON+ajax 分页"涉及到的是在.NET框架下,使用JSON数据格式和Ajax技术来实现网页的动态分页功能。这是一个常见的Web开发需求,尤其是在数据量较大的情况下,为了提高用户体验,避免每次操作都刷新整个...
**jQuery AJAX 分页技术在前端应用详解** 在Web开发中,分页是一种常见的用户界面功能,用于处理大量数据的展示,提高页面加载速度并优化用户体验。本篇文章将深入探讨如何利用jQuery和AJAX技术实现纯前端的分页...
ASP.NET AJAX分页控件是一种在Web应用中实现动态、交互式用户体验的关键技术。它结合了ASP.NET的强大功能和AJAX(Asynchronous JavaScript and XML)的异步特性,以提高网页加载速度,优化用户界面,并减少不必要的...
**MVC3.0无刷新AJAX分页与MvcPager详解** 在Web开发中,用户界面的交互性和响应速度是衡量用户体验的重要因素。MVC3.0(Model-View-Controller)框架是ASP.NET中用于构建可维护和可扩展的Web应用程序的一个强大工具...
实现Ajax分页,通常需要以下几个步骤: 1. 创建前端事件监听器:监听分页链接或按钮的点击事件。 2. 发送Ajax请求:当用户点击分页链接时,向服务器发送包含当前页码的Ajax请求。 3. 处理服务器响应:服务器接收到...
通过结合jQuery的事件处理、AJAX异步请求和Spring MVC的控制器,我们可以实现一个高效的AJAX分页系统。用户可以在不刷新页面的情况下浏览不同页的数据,从而提升Web应用的性能和用户体验。同时,MySQL作为关系型...
通过以上步骤,我们可以实现一个基本的jQuery + AJAX分页功能。在实际项目中,根据需求可能还需要考虑更多细节,如分页大小的调整、搜索和排序功能的集成等。总的来说,jQuery与AJAX的结合极大地提高了Web应用的交互...
这个“一个ajax分页的公共类”提供了一个通用的解决方案,可以被多个页面或项目复用,减少了重复代码,提高了开发效率。 1. **Ajax基础** Ajax的核心是通过JavaScript创建XMLHttpRequest对象,向服务器发送异步...