通过三个案例讲解 Spring Boot 前后端交互：1. 表单提交与参数绑定（求和计算器），演示基础 HTML 表单 POST 请求及后端自动类型转换；2. AJAX 异步交互与 Session 状态管理（用户登录），利用 jQuery AJAX 实现无刷新登录及服务器端 Session 存储用户状态；3. JSON 数据传输与 RESTful 接口（留言板），使用 @RequestBody 接收 JSON 对象并返回数据列表。总结对比了三种联调模式的特点与适用场景。
本文通过三个经典的 Web 案例——表单提交、AJAX 登录与状态管理、以及 JSON 数据交互，展示前后端联调的核心技巧和 Spring Boot 的关键注解。
本案例展示最基础、最传统的 Web 交互方式：HTML 表单提交。
使用 @RestController 简化接口编写，并通过方法参数接收表单数据。
package cn.overthinker.springboot;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RequestMapping("/calc")
@RestController
public class CalcController {
/**
* 求和接口：通过方法参数名自动接收前端表单提交的 num1 和 num2
*/
@RequestMapping("/sum")
public String sum(Integer num1, Integer num2) {
// 使用 Integer 包装类进行非空判断，避免空指针异常
if (num1 == null || num2 == null) {
return "请求非法：请输入两个数字！";
}
// 计算并返回结果
return "计算结果为：" + (num1 + num2);
}
}
[图 1] 求和计算器界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单求和计算器</title>
<style>
body { font-family: sans-serif; background-color: #f4f7f6; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.calculator-container { background-color: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); width: 300px; text-align: center; }
h1 { color: #333; margin-bottom: 30px; font-size: 24px; border-bottom: 2px solid #5cb85c; display: inline-block; padding-bottom: 5px; }
input[type="text"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid ; : ; : border-box; }
{ : ; : white; : ; : none; : ; : pointer; : ; : ; : ; : background-color ease; }
{ : ; }
</style>
</head>
<body>
<div class="calculator-container">
<h1>简单求和计算器</h1>
<form action="/calc/sum" method="post">
数字 1：<input name="num1" type="text" placeholder="请输入数字 1"><br>
数字 2：<input name="num2" type="text" placeholder="请输入数字 2"><br>
<input type="submit" value="点击相加">
</form>
</div>
</body>
</html>
name 属性：前端 <input name="num1"> 中的 name 必须与后端方法的参数名 Integer num1 完全一致。Integer 类型。本案例引入 AJAX 实现无刷新登录，并利用 Session 在服务器端保存用户状态。
package cn.overthinker.springboot;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RequestMapping("/user")
@RestController
public class UserController {
/**
* 登录接口：使用 HttpSession 存储用户信息
*/
@PostMapping("/login")
public boolean login(String userName, String password, HttpSession session) {
if (!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {
return false;
}
// 硬编码校验（实际项目应查询数据库）
if ("admin".equals(userName) && "123456".equals(password)) {
// 核心知识点：登录成功后，将用户名存入 Session
session.setAttribute("loginUser", userName);
return true;
}
return false;
}
/**
* 获取当前登录用户接口：从 Session 中读取用户信息
*/
@GetMapping("/getLoginUser")
public String getLoginUser(HttpServletRequest request) {
// request.getSession(false)：如果 Session 不存在，则不创建
HttpSession session = request.getSession();
(session != ) {
(String) session.getAttribute();
loginUser;
}
;
}
}
虽然未直接用于登录，但作为 JavaBean 演示参数绑定基础。
package cn.overthinker.springboot;
// 略：包含 name, password, age 属性及其 Getter/Setter 和 toString 方法
public class Person {
// ... 属性、Getter/Setter、toString ...
}
[图 2] 登录页面与首页效果
使用 jQuery AJAX 进行异步登录，用户体验更好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<style>
body { font-family: sans-serif; background-color: #e8eff1; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.login-box { background-color: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); width: 280px; text-align: center; }
h1 { color: #3c8dbc; margin-bottom: 25px; }
input[type="text"], { : ; : ; : ; : solid ; : ; : border-box; }
{ : ; : white; : ; : none; : ; : pointer; : ; : ; : background-color ; }
{ : ; }
用户登录
用户名：
密码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录首页</title>
<style>
body { font-family: sans-serif; background-color: #f0f4f7; padding: 50px; }
.welcome { font-size: 24px; color: #333; }
#loginUser { color: #d9534f; font-weight: bold; }
</style>
</head>
<body>
<div class="welcome">欢迎回来，登录人：<span id="loginUser"></span></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$.({
: ,
: ,
: () {
$().(userName || );
}
});
login.html 中，我们使用 jQuery 的 $.ajax 实现异步请求。session.setAttribute("loginUser", userName); 在服务器上创建或关联一个 Session，并存入数据。index.html 请求 /user/getLoginUser 时，服务器通过浏览器传来的 Session ID 找到对应的 Session，从而取出存储的 loginUser 信息，实现了状态保持。本案例是现代 Web 开发最常用的方式：前后端通过 JSON 格式进行数据交互，后端使用 RESTful 风格的接口。
package cn.overthinker.springboot;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import java.util.ArrayList;
import java.util.List;
@RequestMapping("/Message")
@RestController
public class MessageController {
// 存储留言的列表（模拟数据库存储）
private List<MesseageInfo> messeageInfoList = new ArrayList<>();
/**
* 发布留言接口：使用 @RequestBody 接收 JSON 数据
*/
@PostMapping("/publish")
public Boolean publish(@RequestBody MesseageInfo messeageInfo) {
// 参数校验
if (!StringUtils.hasLength(messeageInfo.getFrom()) || !StringUtils.hasLength(messeageInfo.getTo()) || !StringUtils.hasLength(messeageInfo.getMessage())) {
return false;
}
messeageInfoList.add(messeageInfo);
return true;
}
/**
* 获取留言列表接口：返回 JSON 数组
*/
@GetMapping("/getList")
public List<MesseageInfo> getList() {
return messeageInfoList;
}
}
使用 Lombok 的 @Data 注解自动生成 Getter/Setter。
package cn.overthinker.springboot;
import lombok.Data;
@Data
public class MesseageInfo {
private String from;
private String to;
private String message;
}
[图 3] 留言板界面
前端使用 AJAX 发送 JSON 格式的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style>
body { font-family: sans-serif; background-color: #f0f7f4; padding: 20px; }
.container { width: 400px; margin: 20px auto; background-color: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); text-align: center; }
h1 { color: #387063; margin-bottom: 5px; }
.grey { color: #888; margin-bottom: 20px; }
.row { display: flex; : space-between; : center; : ; : ; }
{ : ; : left; : ; : bold; }
{ : ; : ; : ; : solid ; : ; }
{ : ; : ; : ; : white; : none; : ; : ; : ; : pointer; : background-color ; }
{ : ; }
{ : left; : ; : dashed ; : ; }
留言板
输入后点击提交，信息将显示在下方
谁:
对谁:
说什么:
MesseageInfo messeageInfo 对象中。MesseageInfo) 中的属性名（Field Name）保持一致（例如：message 对应 private String message;）。| 联调模式 | 案例 | 核心机制 | 后端注解/参数接收 | 优点 | 缺点 |
|---|---|---|---|---|---|
| Form 表单提交 | 求和计算器 | 浏览器直接跳转/刷新页面 | 方法参数名匹配 | 简单、无需 JavaScript | 用户体验差、无法精细控制 |
| AJAX (Query String) | 登录系统 (GET/POST) | 异步通信（无刷新） | 方法参数名匹配 | 用户体验好、可局部更新 | 仅适用于少量简单数据 |
| AJAX (JSON) | 留言板 | 异步通信（无刷新） | @RequestBody 接收 DTO | 传输复杂结构数据、最常用 | 需要配置 Content-Type 和 JSON.stringify |
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online