Ajax-应用：实现分页

首先我们要清楚为什么要用Ajax实现分页：

Ajax局部刷新技术，相比之前的简易论坛的severlet跳转技术，每次改变都会跳转刷新整个页面。Ajax不用刷新整个页面，只是局部刷新。

这里我分成五点来简述
1.首先在数据库中创建要展示的表，链接数据库，在Javaben中写查询所有要展示内容。

2.编写severlet，在severlet中调用javaben中的方法通过json包返回json文件

3.将从数据库中的找到的数据（保存在list中），转换成json文件（string类型），代码如下：

//商品集合
		List<Goods> ls=igb.getAllByPage(pageIndex, pageSize);
		//获取最大页码
		int max=igb.getMax("goods", pageSize);
		//把集合转为String
		String str=JSON.toJSONString(ls);

4. 在severlet中编写的代码如下：

 

​
package com.zking.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;
import com.zking.biz.GoodsBiz;
import com.zking.biz.IGoodsBiz;
import com.zking.entity.Goods;

@WebServlet("/page.do")
public class PageServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置编码方式
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html; charset=UTF-8");
		
		//获取out
		PrintWriter out=resp.getWriter();
		
		int pageIndex=1;
		int pageSize=5;
		
		//接收pid
		String pid=req.getParameter("pid");
		if(pid!=null) {
			pageIndex=Integer.parseInt(pid);
		}
		
		//调用biz层的分页方法
		IGoodsBiz igb=new GoodsBiz();
		//商品集合
		List<Goods> ls=igb.getAllByPage(pageIndex, pageSize);
		//获取最大页码
		int max=igb.getMax("goods", pageSize);
		//把集合转为String
		String str=JSON.toJSONString(ls);
		//把响应输送到客户端
		out.print(str+"*"+max);//特殊字符做拼接
		out.flush();
		out.close();
	}
	
}

​

5.在jsp页面的布局和jQ代码如下：

（注）：与之前的severlet跳转不同，我们可以看到，代码中并没有你跳转页面，这时需要编写一个js的文件调用

js布局：

	<center>
		<img src="images/17.jpg">
		<input>
		<div id="aa"></div>
		<div>
			<a href="javascript:myf('a')">首页</a>&nbsp;
			<a href="javascript:myf('b')">上一页</a>&nbsp;
			<a href="javascript:myf('c')">下一页</a>&nbsp;
			<a href="javascript:myf('d')">末页</a>&nbsp;
		</div>
	</center>

 jquery和Ajax 代码：

<script type="text/javascript">
	//页面载入函数
	$(function(){
		//默认显示第1页
		myf('a');
	})
	//扩大作用域
	var pageIndex;
	var max;
	//写一个方法专门控制分页
	function myf(type){
		if(type=='a'){
			//首页
			pageIndex=1;
		}
		else if(type=='b'){
			//上一页
			if(pageIndex>1){
				pageIndex--;
			}
			else{
				alert("兄die，已经是第一页了嘞");
			}
		}
		else if(type=='c'){
			//下一页
			if(pageIndex<max){
				pageIndex++;
			}
			else{
				alert("兄die，已经是最后一页了嘞");
			}
		}
		else{
			//末页
			pageIndex=max;
		}
		//ajax
		$.post("page.do", {pid:pageIndex}, function(data) {
			//用*分割
			var x=data.split("*");
			//x[0]代表json格式的对象数组字符串
			//x[1]代表max值 
			//将json格式的对象数组字符串-->js的对象数组
			var ss=$.parseJSON(x[0]);
			//给max赋值
			max=parseInt(x[1]);
			var sb="<table border=\"1px\"><tr align='center'><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";
			//循环遍历
			$.each(ss, function(i, g) {//下标，元素=对象
				sb+="<tr align='center'>";
				sb+="<td>"+g.gid+"</td>";
				sb+="<td>"+g.gname+"</td>";
				sb+="<td><img src='"+g.gpath+"'/></td>";
				sb+="</tr>";
			})
			sb+="</table>";
			sb+="["+pageIndex+"/"+max+"]";
			//给div赋值
			$("#aa").html(sb);
		})
	}
</script>

6.运行：

我们刚进去是怎样一个界面：

 

 

 (注)：下面文本框是为了让我们更好的了解Ajax是否实现了局部刷新的分页。