马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
我使用Servlet、Mybatis和JSP搭建了一个web项目，已经完成了查询功能的开发。现在想写一个分页查询功能，使用SQL的limite语句分页查询，初始化只查询前两个，之后通过点击前端的按钮来切换每页展示的信息。已知分页的selectByPage可以正常运行，但是点击了前端的按钮无法实现预期的分页功能。package edu.zjku.controller;
import edu.zjku.bean.Blog;
import edu.zjku.service.BlogService;
import edu.zjku.service.BlogServiceImpl;
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 java.io.IOException;
import java.util.List;
//这是查询所有博客的Servlet
@WebServlet("/selectServlet")
public class SelectServlet extends HttpServlet {
private BlogService service = new BlogServiceImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//获取分页信息
String param = req.getParameter("pageNumber");
String param2 = req.getParameter("linesPerPage");
int pageNumber;
int linesPerPage;
try {
pageNumber = Integer.parseInt(param);
linesPerPage = Integer.parseInt(param2);
} catch (NumberFormatException e) {
pageNumber = 1;
linesPerPage = 2;
}
//读取数据并封装
List<Blog> blogs = null;
blogs = service.selectByPage(pageNumber, linesPerPage);
//存入会话域给看博客页面使用
HttpSession session = req.getSession();
session.setAttribute("blogs", blogs);
//跳转到看博客页面
resp.sendRedirect("/theBlog/read.jsp");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
<%@ page import="java.util.List" %>
<%@ page import="edu.zjku.bean.Blog" %><%--
Created by IntelliJ IDEA.
User: xing
Date: 2024/3/20
Time: 20:58
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>看博客</title>
<link rel="stylesheet" href="style/public.css">
<style>
.box p:nth-of-type(1) {
text-align: center;
}
.box p:nth-of-type(2) {
white-space: pre-wrap;
}
.box p:nth-of-type(3),
.box p:nth-of-type(4) {
text-align: right;
}
</style>
</head>
<body>
<jsp:include page="header.jsp"/>
<main>
<%
//从会话域获取所有博客
List<Blog> blogs = (List<Blog>) session.getAttribute("blogs");
//循环显示所有博客
for (Blog blog : blogs) {%>
<div class="box">
<p><%=blog.getTitle()%>
</p>
<p><%=blog.getText()%>
</p>
<p><%=blog.getUser()%>
</p>
<p><%=blog.getTime()%>
</p>
</div>
<%}%>
<%-- 这是控制分页的控件--%>
<div class="page">
<button class="prev">上一页</button>
<button class="next">下一页</button>
</div>
</main>
<jsp:include page="footer.jsp"/>
<script>
//这是控制分页的JS
//获取分页控件
let prev = document.querySelector(".page .prev");
let next = document.querySelector(".page .next");
//传递分页信息
let pageNumber = 1;
let linesPerPage = 2;
function prevPage() {
pageNumber -= 1;
let url = `/theBlog/selectServlet?pageNumber=${pageNumber}linesPerPage=${linesPerPage}`;
axios.get(url)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
console.log("运行结束！");
})
}
function nextPage() {
pageNumber += 1;
let url = `/theBlog/selectServlet?pageNumber=${pageNumber}linesPerPage=${linesPerPage}`;
axios.get(url)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
console.log("运行结束！");
})
}
//添加响应事件
prev.addEventListener("click", prevPage);
next.addEventListener("click", nextPage);
</script>
</body>
</html>
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2024-3-25 20:17:32
置顶卡
千斤顶
显身卡
发表于 2024-3-25 20:17:48
楼主