JavaWeb(ajax+json+ajax分页)-CSDN博客

本文链接：https://blog.csdn.net/weixin_65089602/article/details/124499959

ajax说明

一、$.ajax()

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
type	请求方式 (“POST” 或 “GET“[默认])
data	发送到服务器的数据(参数)
dataType	预期服务器返回的数据类型(xml、json、text)
success(data)	请求成功的回调函数
error	请求失败的回调函数

二、$.post()

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

常用参数	说明
url	一个用来包含发送请求的URL字符串(请求地址)
data	发送到服务器的数据(参数) key/value
success(data)	请求成功的回调函数
type	返回内容格式(xml、json、text等)

json

工具：集合--->json格式的String

fastjson

JSON.toJSONString();

json格式的字符串解析成一个对象/对象数组
1.js的方式 eval()
2.jQuery的方式 $.parseJSON()

ajax分页

代码展示

后台加载
@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=2;
		//调biz层
		IGoodsBiz igb=new GoodsBiz();
		//接收模糊查询的关键字
		String gname=req.getParameter("gname");
		if(gname==null) {
			gname="";
		}
		//获取最大页码
		int max=igb.getMax("goods0412 where gname like '%"+gname+"%'", pageSize);
		//接收pid
		String pid=req.getParameter("pid");
		if(pid!=null) {
			pageIndex=Integer.parseInt(pid);
		}
		List<Goods> ls = igb.getAllByPage(pageIndex, pageSize, gname);
		//定义一个map集合
		Map<String, Object> mym=new HashMap<String,Object>();
		//存元素
		mym.put("pageMax", max);
		mym.put("goodlist", ls);
		//利用工具将集合变为json格式的字符串
		String str=JSON.toJSONString(mym);
		//把响应传入界面
		out.write(str);
		out.flush();
		out.close();
	}
	
}

前台代码展示

前台
<!-- 引入jquery -->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!-- 另起一个 -->
<script type="text/javascript">
$(function(){
	//默认显示第一页jquery-3.3.1.js
	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 if(type=='d'){
		//末页
		pageIndex=max;
	}
	$.post("page.do",{pid:pageIndex,gname:name},function(data){
		//alert($.type(data));
		//把json格式的字符串解析成js的对象、对象数组
		//var ss=$.parseJSON(data);
		//alert($.type(ss))
		//alert($.type(data))
		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,function(k,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");
}
</script>
</head>
<body>
	<center>
		<img src="images/33.jpg"/>
		<div>
		商品名：<input type="text" id="gname" />
		<input type="button" value=查询" onclick="myf('a')">
		</div>
		<div id="aa"></div>
		<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>
	</center>
</body>
</html>