如何在Spring Boot中实现JSP页面间的Model传递？

你当前的实现逻辑存在核心问题：$.get("allUsers") 和 $('#dashboard').load('list-users.jsp') 是两个完全独立的HTTP请求。/allUsers 请求中添加到 Model 的 users 数据只属于该请求的上下文，而加载 list-users.jsp 是另一个全新请求，无法获取前一个请求的 Model 数据，自然拿不到用户列表。

下面提供两种可行的修复方案，根据你的需求选择：

方案一：让控制器直接渲染带数据的list-users.jsp #

修改控制器，使其处理 /allUsers 请求后直接返回 list-users.jsp，并将用户数据传入视图。这样通过 load 方法请求控制器路径，就能直接拿到渲染好的带数据的页面。

1. 修改控制器代码 #

@GetMapping("/allUsers")
public String allUsers(Model model) {
    List<User> users = userService.allUsers();
    model.addAttribute("users", users);
    return "list-users"; // 视图名称，需和你的视图解析器配置匹配
}

2. 修改UserView.jsp中的JS代码 #

去掉单独的$.get请求，直接让load请求控制器路径：

<script>
    $(document).ready(function(){
        $("#view-users").click(function(){
            // 直接请求控制器，拿到渲染好的带数据的list-users页面
            $('#dashboard').load('/allUsers');
        });
    });
</script>

3. 修改list-users.jsp代码 #

取消注释，正确从request中获取用户列表：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ page import="com.training.transportcomany2.model.User"%>
<%@ page import="java.util.*"%>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</head>
<body>
<%
    List<User> userList = (List<User>)request.getAttribute("users");
%>
<table class="table">
    <thead>
    <tr>
        <th scope="col">Id</th>
        <th scope="col">First Name</th>
        <th scope="col">Last Name</th>
    </tr>
    </thead>
    <tbody>
    <% if(userList != null && !userList.isEmpty()) {
        for (User user : userList) {
    %>
    <tr>
        <td><%=user.getId()%></td>
        <td><%=user.getFirstName()%></td>
        <td><%=user.getLastName()%></td>
    </tr>
    <% 
        }
    } %>
    </tbody>
</table>
</body>
</html>

方案二：AJAX获取JSON数据，前端动态渲染表格 #

如果希望前端完全通过AJAX获取数据并动态生成页面，可以让控制器返回JSON格式的用户列表，然后在JS中处理数据并构建表格。

1. 修改控制器代码 #

@GetMapping("/allUsers")
@ResponseBody
public List<User> allUsers() {
    return userService.allUsers();
}

2. 修改UserView.jsp中的JS代码 #

<script>
    $(document).ready(function(){
        $("#view-users").click(function(){
            $.get("/allUsers", function(users) {
                // 构建表格HTML
                let tableHtml = `
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Id</th>
                                <th scope="col">First Name</th>
                                <th scope="col">Last Name</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                
                if(users.length > 0) {
                    users.forEach(user => {
                        tableHtml += `
                            <tr>
                                <td>${user.id}</td>
                                <td>${user.firstName}</td>
                                <td>${user.lastName}</td>
                            </tr>
                        `;
                    });
                }
                
                tableHtml += `
                        </tbody>
                    </table>
                `;
                
                // 将表格插入dashboard
                $('#dashboard').html(tableHtml);
            });
        });
    });
</script>

3. 简化list-users.jsp（可选） #

这种方案下，可以不需要单独的list-users.jsp，因为表格是前端动态生成的。如果保留该文件，也可以简化为空模板，但通常不需要。

内容的提问来源于stack exchange，提问作者DrDoggo