Freemarker中AJAX GET请求无法正常渲染用户列表问题求助

核心问题分析 #

你的场景是通过AJAX请求后端接口获取用户数据，再在Freemarker页面渲染，但数据无法正常展示，常见问题集中在后端JSON返回异常、数据序列化失败、前端请求/解析错误三个环节，以下是具体排查和解决步骤：

1. 修复Controller注解配置 #

注解使用错误会导致后端返回的不是JSON数据，而是视图名称或其他内容，AJAX无法解析：

• 如果使用@Controller：必须在getAllUsers方法上添加@ResponseBody注解，否则Spring会把返回的List当作视图名称去查找，而非返回JSON：

@Controller
public class UserController {
    @GetMapping("/users")
    @ResponseBody // 必须添加，确保返回JSON
    public ResponseEntity<?> getAllUsers() {
        List<User> userList = service.getAllUsers();
        List<UserResponse> users = new ArrayList<>();

        userList.forEach(user->
            users.add(new UserResponse(user.getUuid(),
                    user.getUsername(),
                    user.getEmail(),
                    user.getRole(),
                    user.getBalance(),
                    user.getState()))
        );
        return ResponseEntity.ok(users);
    }
}

• 如果使用@RestController：该注解本身包含@ResponseBody，无需额外添加，直接返回ResponseEntity即可，确保代码中没有拼写错误。

2. 确保UserResponse可正常序列化 #

Spring依赖Jackson将对象序列化为JSON，若UserResponse缺少getter方法或字段访问权限，会导致JSON中缺失对应字段，前端无法获取：

• 为UserResponse的所有需要返回的字段（uuid、username、email等）添加getter方法，或使用Lombok的@Data注解自动生成：

// 手动实现getter的示例
public class UserResponse {
    private String uuid;
    private String username;
    private String email;
    private String role;
    private BigDecimal balance;
    private Integer state;

    // 构造方法
    public UserResponse(String uuid, String username, String email, String role, BigDecimal balance, Integer state) {
        this.uuid = uuid;
        this.username = username;
        this.email = email;
        this.role = role;
        this.balance = balance;
        this.state = state;
    }

    // 必须添加对应字段的getter
    public String getUuid() { return uuid; }
    public String getUsername() { return username; }
    public String getEmail() { return email; }
    public String getRole() { return role; }
    public BigDecimal getBalance() { return balance; }
    public Integer getState() { return state; }
}

3. 前端调试与错误捕获 #

通过浏览器开发者工具（F12）定位前端问题：

1. 打开Network标签，查看/users请求的响应：
   • 确认响应状态码为200，响应体是正确的JSON数组；
   • 若响应不是JSON，检查后端返回是否符合预期。
2. 打开Console标签，查看是否有JS报错（比如字段未定义、forEach无法调用等）。
3. 为AJAX添加error回调，捕获请求失败的详细信息：

<script>
    $(document).ready(function() {
        $.ajax({
            url: "/users",
            type: "GET",
            dataType: "json",
            success: function(users) {
                console.log("获取到的用户数据：", users); // 调试用，确认数据结构
                users.forEach(function(user) {
                    let row = $("<tr>" +
                        "<td>" + user.uuid + "</td>" +
                        "<td>" + user.username + "</td>" +
                        "<td>" + user.email + "</td>" +
                        "</tr>");
                    $("#user-table tbody").append(row);
                });
            },
            error: function(xhr, status, error) {
                console.error("请求失败：", status, error);
                console.error("响应内容：", xhr.responseText);
            }
        });
    });
</script>

4. 字段名一致性检查 #

确保前端JS中访问的字段名（如user.uuid、user.username）与后端UserResponse的字段名完全一致，大小写敏感，若后端字段是UUID，前端不能写成uuid。

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