Spring Boot Web 三大核心交互实战：表单、AJAX 与 JSON | 极客日志

Java大前端java

Spring Boot Web 三大核心交互实战：表单、AJAX 与 JSON

Spring Boot Web 交互涵盖表单提交、AJAX 登录及 JSON 数据交换三种模式。通过求和计算器、用户登录系统及留言板三个实战案例，详解了 @RestController、@RequestBody、Session 状态管理及前后端参数绑定的核心用法。对比不同联调模式的优缺点，帮助开发者掌握前后端协作的关键技巧与常见陷阱。

SparkGeek发布于 2026/3/26更新于 2026/9/1255 浏览

Spring Boot Web 三大核心交互实战

理解后端接口编写和前端页面交互是掌握 Spring Boot 的关键。本文将通过三个经典案例——表单提交、AJAX 登录与状态管理、以及 JSON 数据交互，带你梳理前后端联调的核心技巧。

1. 案例一：表单提交与参数绑定（计算求和）

这是最基础的传统 Web 交互方式，利用 HTML 表单直接提交数据。

1.1 后端代码：`CalcController.java`

使用 @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.2 前端代码：`calc.html`

界面简洁，表单直接指向后端接口。

界面效果

📋 HTML 代码

<!DOCTYPE html>
<html lang=>



简单求和计算器




简单求和计算器

  数字 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

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(false);
        if (session != null) {
            String loginUser = (String) session.getAttribute("loginUser");
            return loginUser;
        }
        return "";
    }
}

<!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",
        // 核心联调：通过 AJAX 传递参数
        data: {
            userName: $("#userName").val(),
            password: $("#password").val()
        },
        success: function(result) {
            if (result) {
                // 登录成功，跳转到首页
                location.href = "/index.html";
            } else {
                alert("用户名或密码错误");
            }
        }
    });
}
</script>
</body>
</html>

<!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>
// 页面加载后立即发起 AJAX 请求获取 Session 中的登录信息
$.ajax({
    url: "user/getLoginUser",
    type: "get",
    success: function(userName) {
        // 将后端返回的用户名显示在页面上
        $("#loginUser").text(userName || "（未登录）");
    }
});
</script>
</body>
</html>

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<MessageInfo> messageInfoList = new ArrayList<>();

    /**
     * 发布留言接口：使用 @RequestBody 接收 JSON 数据
     */
    @PostMapping("/publish")
    public Boolean publish(@RequestBody MessageInfo messageInfo) {
        // 参数校验
        if (!StringUtils.hasLength(messageInfo.getFrom()) || !StringUtils.hasLength(messageInfo.getTo()) || !StringUtils.hasLength(messageInfo.getMessage())) {
            return false;
        }
        messageInfoList.add(messageInfo);
        return true;
    }

    /**
     * 获取留言列表接口：返回 JSON 数组
     */
    @GetMapping("/getList")
    public List<MessageInfo> getList() {
        return messageInfoList;
    }
}

package cn.overthinker.springboot;

import lombok.Data;

@Data
// Lombok 注解，自动生成 Getter/Setter, toString, equals 等方法
public class MessageInfo {
    private String from;
    private String to;
    private String message;
    // 注意：前端传的字段名是 message
}

<!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;
    }
    // 核心联调：发送 JSON 数据
    $.ajax({
        type: "post",
        url: ,
        
        : ,
        
        : .({
            : ,
            : to,
            
            : say
        }),
        : () {
             (result) {
                
                ();
                
                $().();
                $().();
                $().();
            }  {
                ();
            }
        }
    });
}
</script>
</body>
</html>

联调模式	案例	核心机制	后端注解/参数接收	优点	缺点
Form 表单提交	求和计算器	浏览器直接跳转/刷新页面	方法参数名匹配	简单、无需 JavaScript	用户体验差、无法精细控制
AJAX (Query String)	登录系统 (GET/POST)	异步通信（无刷新）	方法参数名匹配	用户体验好、可局部更新	仅适用于少量简单数据
AJAX (JSON)	留言板	异步通信（无刷新）	`@RequestBody` 接收 DTO	传输复杂结构数据、最常用	需要配置 `Content-Type` 和 `JSON.stringify`

Spring Boot Web 三大核心交互实战：表单、AJAX 与 JSON

Spring Boot Web 三大核心交互实战

1. 案例一：表单提交与参数绑定（计算求和）

1.1 后端代码：`CalcController.java`

1.2 前端代码：`calc.html`

📋 HTML 代码

更多推荐文章

相关免费在线工具

1.3 联调重点解析：参数绑定

2. 案例二：AJAX 异步交互与 Session 状态管理（用户登录）

2.1 后端代码：`UserController.java`

`UserController.java` (核心逻辑)

2.2 前端代码：`login.html` 和 `index.html`

`login.html` (登录页面)

`index.html` (首页 - 获取登录信息)

2.3 联调重点解析：AJAX 与 Session

3. 案例三：JSON 数据传输与 RESTful 接口（留言板）

3.1 后端代码：`MessageController.java` 和 `MessageInfo.java`

`MessageController.java` (核心逻辑)

`MessageInfo.java` (数据传输对象 DTO)

3.2 前端代码：`message.html`

📋 HTML 代码

3.3 联调重点解析：`@RequestBody` 与 JSON

4. 总结：前后端联调模式对比

更多推荐文章

相关免费在线工具

Spring Boot Web 三大核心交互实战：表单、AJAX 与 JSON

Spring Boot Web 三大核心交互实战

1. 案例一：表单提交与参数绑定（计算求和）

1.1 后端代码：CalcController.java

1.2 前端代码：calc.html

📋 HTML 代码

更多推荐文章

相关免费在线工具

1.3 联调重点解析：参数绑定

2. 案例二：AJAX 异步交互与 Session 状态管理（用户登录）

2.1 后端代码：UserController.java

UserController.java (核心逻辑)

2.2 前端代码：login.html 和 index.html

login.html (登录页面)

index.html (首页 - 获取登录信息)

2.3 联调重点解析：AJAX 与 Session

3. 案例三：JSON 数据传输与 RESTful 接口（留言板）

3.1 后端代码：MessageController.java 和 MessageInfo.java

MessageController.java (核心逻辑)

MessageInfo.java (数据传输对象 DTO)

3.2 前端代码：message.html

📋 HTML 代码

3.3 联调重点解析：@RequestBody 与 JSON

4. 总结：前后端联调模式对比

更多推荐文章

相关免费在线工具

1.1 后端代码：`CalcController.java`

1.2 前端代码：`calc.html`

2.1 后端代码：`UserController.java`

`UserController.java` (核心逻辑)

2.2 前端代码：`login.html` 和 `index.html`

`login.html` (登录页面)

`index.html` (首页 - 获取登录信息)

3.1 后端代码：`MessageController.java` 和 `MessageInfo.java`

`MessageController.java` (核心逻辑)

`MessageInfo.java` (数据传输对象 DTO)

3.2 前端代码：`message.html`

3.3 联调重点解析：`@RequestBody` 与 JSON