跳到主要内容Spring Boot Web 三大核心交互实战：表单、AJAX 与 JSON | 极客日志Java大前端java
Spring Boot Web 三大核心交互实战：表单、AJAX 与 JSON
Spring Boot Web 开发涉及三种主流交互模式。本教程通过求和计算器演示表单参数绑定，利用 Session 实现无刷新登录状态管理，并通过 RESTful 接口完成 JSON 数据交互。重点解析 @RequestBody 注解使用、前后端字段匹配及 AJAX 异步请求配置，帮助开发者掌握从传统页面跳转至现代前后端分离的核心联调技巧。
Spring Boot Web 三大核心交互实战
作为后端开发，理解前后端如何'对话'是基本功。我们通常通过三种典型场景来掌握这些交互：表单提交、AJAX 异步登录以及JSON 数据交互。下面直接看代码和关键点。
1. 基础交互：表单提交与参数绑定
这是最传统的模式，适合简单的页面跳转场景。我们以一个求和计算器为例。
后端实现
使用 @RestController 简化接口，Spring MVC 会自动将请求参数映射到方法参数上。
package cn.overthinker.springboot;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RequestMapping("/calc")
@RestController
public class CalcController {
@RequestMapping("/sum")
public String sum(Integer num1, Integer num2) {
if (num1 == null || num2 == null) {
return "请求非法：请输入两个数字！";
}
return "计算结果为：" + (num1 + num2);
}
}
前端页面
HTML 表单的 name 属性必须与后端参数名完全一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta = =>
简单求和计算器
简单求和计算器
数字 1：
数字 2：
相关免费在线工具
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
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 #ccc; border-radius: 6px; box-sizing: border-box; }
input[type="submit"] { background-color: #5cb85c; color: white; padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; margin-top: 20px; width: 100%; transition: background-color 0.3s ease; }
input[type="submit"]:hover { background-color: #4cae4c; }
</style>
</head>
<body>
<div class="calculator-container">
<h1>
</h1>
<form action="/calc/sum" method="post">
<input name="num1" type="text" placeholder="请输入数字 1">
<br>
<input name="num2" type="text" placeholder="请输入数字 2">
<br>
<input type="submit" value="点击相加">
</form>
</div>
</body>
</html>
- 前端
<input name="num1"> 的 name 必须与后端 Integer num1 完全一致。
- Spring Boot 会自动处理字符串到
Integer 的类型转换。
2. 进阶交互：AJAX 异步登录与 Session 管理
现代应用很少整页刷新，我们常用 AJAX 配合 Session 保持用户状态。
后端逻辑
登录成功后，将用户名存入 HttpSession。后续请求携带 Session ID 即可识别身份。
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 {
@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.setAttribute("loginUser", userName);
return true;
}
return false;
}
@GetMapping("/getLoginUser")
public String getLoginUser(HttpServletRequest request) {
HttpSession session = request.getSession(false);
if (session != null) {
String loginUser = (String) session.getAttribute("loginUser");
return loginUser;
}
return "";
}
}
前端实现
使用 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"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
input[type="button"] { background-color: #3c8dbc; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; width: 100%; transition: background-color 0.3s; }
input[type="button"]:hover { background-color: #367fa9; }
</style>
</head>
<body>
<div class="login-box">
<h1>用户登录</h1>
用户名：<input name="userName" type="text" id="userName" placeholder="请输入用户名"><br>
密码：<input name="password" type="password" id="password" placeholder="请输入密码"><br>
<input type="button" value="登录" onclick="login()">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function login() {
$.ajax({
url: "/user/login",
type: "post",
data: {
userName: $("#userName").val(),
password: $("#password").val()
},
success: function(result) {
if (result) {
location.href = "/index.html";
} else {
alert("用户名或密码错误");
}
}
});
}
</script>
</body>
</html>
原理说明：
浏览器通过 Cookie 自动携带 Session ID。服务器根据 ID 找到对应的 Session 对象，从而取出之前存储的 loginUser 信息。
3. 现代交互：JSON 数据传输与 RESTful 接口
前后端分离架构下，JSON 是最通用的数据格式。这里演示一个简单的留言板功能。
后端 DTO 与 Controller
使用 @RequestBody 接收 JSON 字符串并自动反序列化为 Java 对象。
package cn.overthinker.springboot;
import lombok.Data;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import java.util.ArrayList;
import java.util.List;
@Data
public class MesseageInfo {
private String from;
private String to;
private String message;
}
@RequestMapping("/Message")
@RestController
public class MessageController {
private List<MesseageInfo> messeageInfoList = new ArrayList<>();
@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;
}
@GetMapping("/getList")
public List<MesseageInfo> getList() {
return messeageInfoList;
}
}
前端发送 JSON
注意 contentType 设置和 JSON.stringify 的使用。
<!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; justify-content: space-between; align-items: center; height: 40px; margin-bottom: 10px; }
.row span { width: 70px; text-align: left; color: #555; font-weight: bold; }
.row input { flex-grow: 1; height: 35px; padding: 5px 10px; border: 1px solid #ddd; border-radius: 4px; }
#submit { width: 100%; height: 45px; background-color: #387063; color: white; border: none; border-radius: 5px; margin-top: 20px; font-size: 18px; cursor: pointer; transition: background-color 0.3s; }
#submit:hover { background-color: #2b574d; }
.message-list div { text-align: left; padding: 8px 0; border-bottom: 1px dashed #eee; color: #333; }
</style>
</head>
<body>
<div class="container">
<h1>留言板</h1>
<p class="grey">输入后点击提交，信息将显示在下方</p>
<div class="row"><span>谁:</span><input type="text" id="from" placeholder="你的名字"></div>
<div class="row"><span>对谁:</span><input type="text" id="to" placeholder="你想对谁说"></div>
<div class="row"><span>说什么:</span><input type="text" id="say" placeholder="你的留言内容"></div>
<input type="button" value="提交留言" id="submit" onclick="submit()">
<div class="message-list"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function loadMessages() {
$.ajax({
type: "get",
url: "/Message/getList",
success: function(messages) {
$(".message-list").empty();
for (let msg of messages) {
let divE = "<div>" + msg.from + " 对 " + msg.to + " 说：" + msg.message + "</div>";
$(".message-list").append(divE);
}
}
});
}
loadMessages();
function submit() {
var from = $('#from').val();
var to = $('#to').val();
var say = $('#say').val();
if (from == '' || to == '' || say == '') return;
$.ajax({
type: "post",
url: "/Message/publish",
: ,
: .({
: ,
: to,
: say
}),
: () {
(result) {
();
$().();
$().();
$().();
} {
();
}
}
});
}
</script>
</body>
</html>
- @RequestBody：告诉 Spring 把 Request Body 里的 JSON 解析成对象。
- Content-Type：前端必须设为
application/json。
- 字段匹配：JSON 的 Key 必须与 DTO 的属性名一致（如
message）。
总结：三种模式对比
| 联调模式 | 适用场景 | 核心机制 | 优点 | 缺点 |
|---|
| Form 表单提交 | 简单工具、旧式系统 | 浏览器跳转/刷新 | 简单、无需 JS | 体验差、无法精细控制 |
| AJAX (Query) | 登录、搜索 | 异步通信 | 无刷新、体验好 | 仅适合少量数据 |
| AJAX (JSON) | 复杂业务、前后端分离 | @RequestBody 接收 DTO | 传输结构数据、灵活 | 需配置 Content-Type |
掌握这三种模式，基本能覆盖 90% 的 Web 交互需求。
contentType
"application/json"
data
JSON
stringify
from
from
to
message
success
function
result
if
loadMessages
'#from'
val
""
'#to'
val
""
'#say'
val
""
else
alert
"添加留言失败，请检查输入"
