JavaWeb23(ajax实现分页)

Ajax:局部刷新只刷新局部

用Ajax实现分页

1.判断ta所在的页数

//页面载入函数
$(function() {
	//默认显示第一页
	myf('a');
})
//专门控制分页
var pageIndex;
var max;
function myf(type){
	//拿到文本框的值
	var name=$("#gname").val();
	if(type=='a'){
		//首页
		pageIndex=1;
	}
	else if(type=='b'){
		//上一页
		if(pageIndex>1){
			pageIndex--;
		}
		else{
			alert("已经是第一页了");
		}
	}
	else if(type=='c'){
		//下一页
		if(pageIndex<max){
			pageIndex++;
		}
		else{
			alert("已经是末页了");
		}
	}
	else{
		//末页
		pageIndex=max;
	}

2.显示数据

$.post("page.do",{pid:pageIndex,gname:name},function(data){
		//根据属性拿到属性值 根据键拿到值
		//alert(data.pageMax); max
		//alert(data.goodsList); 集合
		//把json格式的字符串解析成js的对象/对象数组
		//var ss=$.parseJSON(data);
		//alert($.type(ss));//array
		max=data.pageMax;
		var sb="<table border=\"1px\" width=\"50%\">";
		sb+="<tr align=\"center\">";
		sb+="<td>商品序号</td>";
		sb+="<td>商品名称</td>";
		sb+="<td>商品图片</td>";
		sb+="</tr>";
		$.each(data.goodsList, function(i, g) {//下标,元素
			sb+="<tr>";
			sb+="<td>"+g.gid+"</td>";
			sb+="<td>"+g.gname+"</td>";
			sb+="<td><img src='"+g.gpath+"'/></td>";
			sb+="</tr>";
		})	
		sb+="</table>";
		//给div赋值
		$("#aa").html(sb);
		//赋值当前页码&最大页码
		$("#xx").html(pageIndex);
		$("#yy").html(max);
	},"json");
}

3.显示当前页码

<div>
			<a href="javascript:myf('a')">首页</a>
			<a href="javascript:myf('b')">上一页</a>
			<a href="javascript:myf('c')">下一页</a>
			<a href="javascript:myf('d')">末页</a>
			【<span id="xx"></span>/<span id="yy"></span>】
		</div>

调到这个界面@WebServlet("/page.do")

//设置编码方式
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=UTF-8");
		
		//获取out
		PrintWriter out=resp.getWriter();
		
		int pageIndex=1;
		int pageSize=2;
		//servlet调用biz层
		IGoodBiz igb=new GoodBiz();
		//接收模糊查询关键字
		String gname=req.getParameter("gname");
		if(gname==null) {
			gname="";//相当于查询全部
		}
		//获取最大页码
		int max=igb.getMax("goods where gname like '%"+gname+"%'", pageSize);
		//接收pid
		String pid=req.getParameter("pid");
		if(pid!=null) {
			pageIndex=Integer.parseInt(pid);//改变页码
		}
		List<News> ls = igb.getAllBypage(pageIndex, pageSize, gname);
		System.out.println(ls);
		//定义一个map集合
		Map<String, Object> mym=new HashMap<>();
		//存元素(一对)
		mym.put("pageMax", max);
		mym.put("goodsList", ls);
		
		String str=JSON.toJSONString(mym);
		System.out.println(str); 
		//把响应输送到客户端=页面
		out.write(str);
		out.flush();
		out.close();
	}

效果图：