JavaWEB（AJAX实现分页）

飓风.

于 2022-05-14 16:53:34 发布

阅读量103

点赞数

文章标签： ajax javascript ecmascript

本文链接：https://blog.csdn.net/qq_62981121/article/details/124606039

版权

本文介绍了如何在JavaWEB应用中利用AJAX技术实现无刷新分页功能，详细讲解了显示页面的AJAX代码、分页点击事件处理、模糊查询以及后台servlet的处理代码，旨在帮助开发者理解并实现这一常见功能。

摘要由CSDN通过智能技术生成

无刷新分页

显示页面ajax代码

function myload(){
		$.post("indexServlet.do",{"pageIndex":pageIndex,"strName":strName},function(data){
			let list=$.parseJSON(data);
			pageMax=list.pageMax;
			let str="";
			
			  $.each(list.GoodsList,function(index,obj){
					str+="<tr>"
					str+="<td><input name='bookId' value='"+obj.gid+"' type='checkbox' /></td>";
					str+="<td>"+obj.gname+"</td>";
					str+="<td>"+obj.gprice+"</td>";
					str+="<td>"+obj.gkc+"</td>";
					str+="<td><img width='100';height='80'; src='"+obj.gimage+"' /></td>";
					str+="<td><button onclick='add("+obj.gid+")' type='button'>加入购物车</button></td>";
					str+="</tr>"
			});
			  for(let i=0;i<3;i++){
					$("#tab").find("tr").eq(1).remove();
				}
			$("#tab").append($(str));  
			$("#index").html(pageIndex);
			$("#max").html(pageMax);
			
		});
	}

分页点击方法

//分页
	function nextPage(x){
		//获取输入框中的值
		
		strName=$("#input_ss").val();
		if(x==1){
			pageIndex=1;
		}
		if(x==2){
			if(pageIndex-1>0){
				pageIndex--;
			}
		}
		if(x==3){
			if(pageIndex+1>pageMax){
				
			}else{
				pageIndex++;
			}
		}
		if(x==4){
			pageIndex=pageMax;
		}
		myload();
	}

模糊查询的方法

function submit(){
		kk=$("#input_ss").val();
		if(kk){
		pageIndex=1;
			strName=$("#input_ss").val();
			myload();
		}else{
			alert('请输入值在搜索');
		}
	}

显示页面全部代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 引入 -->
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主界面</title>

<style type="text/css">
	#likes{
		width: 200px;
		 background: red; 
		height: 200px;
		text-align: right;
		display: inline;
		/* border:1 slid red ; */
	}
	.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}

</style>

<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
	let pageIndex=1;
	let pageMax=0;
	let strName="";
	
	function myload(){
		$.post("indexServlet.do",{"pageIndex":pageIndex,"strName":strName},function(data){
			let list=$.parseJSON(data);
			pageMax=list.pageMax;
			let str="";
			
			  $.each(list.GoodsList,function(index,obj){
					str+="<tr>"
					str+="<td><input name='bookId' value='"+obj.gid+"' type='checkbox' /></td>";
					str+="<td>"+obj.gname+"</td>";
					str+="<td>"+obj.gprice+"</td>";
					str+="<td>"+obj.gkc+"</td>";
					str+="<td><img width='100';height='80'; src='"+obj.gimage+"' /></td>";
					str+="<td><button onclick='add("+obj.gid+")' type='button'>加入购物车</button></td>";
					str+="</tr>"
			});
			  for(let i=0;i<3;i++){
					$("#tab").find("tr").eq(1).remove();
				}
			$("#tab").append($(str));  
			$("#index").html(pageIndex);
			$("#max").html(pageMax);
			
		});
	}
	
	$(function(){
		myload();
	});
	//分页
	function nextPage(x){
		//获取输入框中的值
		
		strName=$("#input_ss").val();
		if(x==1){
			pageIndex=1;
		}
		if(x==2){
			if(pageIndex-1>0){
				pageIndex--;
			}
		}
		if(x==3){
			if(pageIndex+1>pageMax){
				
			}else{
				pageIndex++;
			}
		}
		if(x==4){
			pageIndex=pageMax;
		}
		myload();
	}
	
	function submit(){
		kk=$("#input_ss").val();
		if(kk){
		pageIndex=1;
			strName=$("#input_ss").val();
			myload();
		}else{
			alert('请输入值在搜索');
		}
	}
</script>
</head>
<body>
<div id="header" class="wrap">
	<div id="logo">卓京信息网上书城</div>
	<div id="navbar">
		<div class="userMenu">
			<ul>
				<li class="current"><a href="index.jsp">User首页</a></li>
				<li><a href="queryorders.do">我的订单</a></li>
				<li><a href="shopping.jsp">购物车</a></li>
				<li><a href="#">注销</a></li>
			</ul>
		</div>
			搜索：<input id="input_ss" class="input-text" type="text" name="strName" /><input onclick="submit()" class="input-btn" type="submit" name="submit" value="" />
	</div>
	<!-- 搜索提示 div -->
		<div id="likes" ></div>
</div>
<div id="content" class="wrap">
	<div class="list bookList">
		<form method="post" name="shoping" action="Cart.do">
			<table id="tab">
				<tr class="title">
					<th class="checker"></th>
					<th>书名</th>
					<th class="price">价格</th>
					<th class="store">库存</th>
					<th class="view">图片预览</th>
					<th>操作</th>
				</tr>
				
				
				
			
			</table>
			<ul class="pager">
		    <li><a href="javascript:nextPage(1)">首页</a></li>
		    <li><a href="javascript:nextPage(2)">上一页</a></li>
		    <li><span id="index"></span><span id="max"></span></li>
		    <li><a href="javascript:nextPage(3)">下一页</a></li>
		    <li><a href="javascript:nextPage(4)">末页</a></li>
			</ul>
			<div class="button"><input class="input-btn" type="submit" name="submit" value="" /></div>
		</form>
	</div>
</div>
<div id="footer" class="wrap">卓京信息网上书城 &copy; 版权所有</div>
	<script type="text/javascript">
		function add(gid){
			location.href="Cart.do?gid="+gid+"";
		}
			
	
	</script>

</body>
</html>

servlet页面代码

package com.zking.cart.selvelt;

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

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 javax.servlet.http.HttpSession;
import javax.websocket.Session;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.cart.biz.GoodsBiz;
import com.zking.cart.bizimpl.GoodsBizimpl;
import com.zking.cart.entitl.Goods;
import com.zking.cart.entitl.Users;

/**
 * Servlet implementation class indexServlet
 */
@WebServlet("/indexServlet.do")
public class indexServlet extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//1.设置编码格式
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		
		GoodsBiz gb=new GoodsBizimpl();
		
		String index=request.getParameter("pageIndex");
		String strName=request.getParameter("strName");
		if(strName==null) {
			strName="";
		}
		int pageIndex=1;
		if(index!=null){
			pageIndex=Integer.valueOf(index);
		}
		int pageSize=3;
		//调用获取商品总数的方法
		int count = gb.getCount(strName);
		//设置最大页码
		int pageMax=count%pageSize==0?count/pageSize:count/pageSize+1;
		
		//调用查询所有的方法
		List<Goods> GoodsList = gb.queryGoodsByfy(pageIndex, pageSize, strName);
		
		//获取登录界面传过来的用户实体
		
		HttpSession session = request.getSession();
		//获取登录用户的信息
		Users users= (Users) session.getAttribute("users");
		session.setAttribute("users", users);
		//
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("pageIndex",pageIndex );
		map.put("pageMax", pageMax);
		map.put("GoodsList", GoodsList);
		//实例化json转换类
		ObjectMapper maper=new ObjectMapper();
		String writeValueAsString = maper.writeValueAsString(map);
		PrintWriter out = response.getWriter();
		out.write(writeValueAsString);
		
		
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}