为什么我的java web分页功能无法实现？
我使用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>
在你提供的代码中，我注意到了一些问题。首先，你的分页链接缺少了一个“&”符号，导致无法正确传递两个参数（pageNumber和linesPerPage）。其次，你的Servlet只是重定向到了一个JSP页面，但是并没有将查询结果传递给JSP页面进行展示。因此，在点击前端按钮后，你并没有看到分页的效果。
为了解决这个问题，你可以按照以下步骤进行操作：
1. 修改分页链接：
在你的JS文件中，将分页链接的url修改为：
`let url = `/theBlog/selectServlet?pageNumber=${pageNumber}&linesPerPage=${linesPerPage}`;`
2. 修改Servlet：
在Servlet的doGet方法中，将查询结果封装成一个JSON对象，并传递给JSP页面。修改的代码如下：
//读取数据并封装
List<Blog> blogs = service.selectByPage(pageNumber, linesPerPage);
//将查询结果封装成JSON对象
JSONObject json = new JSONObject();
json.put("blogs", blogs);
json.put("pageNumber", pageNumber);
json.put("linesPerPage", linesPerPage);
//将JSON对象存入请求域中
req.setAttribute("result", json);
//跳转到看博客页面
req.getRequestDispatcher("/theBlog/read.jsp").forward(req, resp);
3. 修改JSP页面：
在read.jsp页面中，使用EL表达式获取请求域中的JSON对象，并根据需要展示分页的内容。修改的代码如下：
<%
JSONObject result = (JSONObject) request.getAttribute("result");
List<Blog> blogs = (List<Blog>) result.get("blogs");
int pageNumber = (int) result.get("pageNumber");
int linesPerPage = (int) result.get("linesPerPage");
%>
<!-- 在这里根据自己的需求展示分页内容，可以使用JSTL标签库进行循环遍历 -->
通过以上修改，你应该可以实现分页功能了。希望对你有所帮助！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 idea提示没有JSONObject这个类啊 ZhihanXing 发表于 2024-03-25 20:42
idea提示没有JSONObject这个类啊
抱歉，对不起给你带来困扰。在Java中，使用JSON对象需要引入相应的库。您可以使用第三方库，比如JSON.jar或者Gson等。下面是使用Gson库来完成JSON对象封装的代码示例：
import com.google.gson.Gson;
// 读取数据并封装
List<Blog> blogs = service.selectByPage(pageNumber, linesPerPage);
// 将查询结果封装成JSON对象
Gson gson = new Gson();
String jsonResult = gson.toJson(blogs);
// 将JSON对象存入请求域中
req.setAttribute("result", jsonResult);
// 跳转到看博客页面
req.getRequestDispatcher("/theBlog/read.jsp").forward(req, resp);
然后，在JSP页面中通过EL表达式获取请求域中的JSON字符串，并将其转换为实际的对象：
<%
String jsonResult = (String) request.getAttribute("result");
Gson gson = new Gson();
List<Blog> blogs = gson.fromJson(jsonResult, new TypeToken<List<Blog>>(){}.getType());
%>
<!-- 使用blogs进行展示 -->
请确保已经正确导入Gson库，你可以在Maven项目中在pom.xml文件中添加以下依赖：
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.6</version>
</dependency>
希望这次能解决您的问题！如果还有其他问题，请随时提问。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。 我不能将其存入会话域然后在jsp读取吗？ ZhihanXing 发表于 2024-03-25 20:43
我不能将其存入会话域然后在jsp读取吗？
当然可以将查询结果存入会话域中，然后在JSP页面中读取会话域的数据。以下是修改后的代码示例：在Servlet的doGet方法中，将查询结果存入会话域中：//读取数据并封装List blogs = service.selectByPage(pageNumber, linesPerPage);//存入会话域给看博客页面使用HttpSession session = req.getSession();session.setAttribute("blogs", blogs);session.setAttribute("pageNumber", pageNumber);session.setAttribute("linesPerPage", linesPerPage);//跳转到看博客页面resp.sendRedirect("/theBlog/read.jsp");在JSP页面中，通过EL表达式读取会话域中的数据并进行展示： <%@ page language="java" contentType="text/html; charset=UTF-8"%><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>博客列表</title> </head> <body> <h1>博客列表</h1> <table> <thead> <tr> <th>ID</th> <th>标题</th> <th>内容</th> </tr> </thead> <tbody> <c:forEach var="blog" items="${sessionScope.blogs}"> <tr> <td>${blog.id}</td> <td>${blog.title}</td> <td>${blog.content}</td> </tr> </c:forEach> </tbody> </table> <div class="page"> <button class="prev" onclick="prevPage()">上一页</button> <button class="next" onclick="nextPage()">下一页</button> </div> <script src="your_script.js"></script> </body> </html>通过以上修改，您应该可以在JSP页面中展示分页查询的结果了。希望对您有所帮助！如有任何疑问，请随时提问。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]