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

联调要点：

• 前端 <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 {
    /**
     * 登录接口：使用 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 "";
    }
}

前端实现

使用 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<>();

    /**
     * 发布留言接口：使用 @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;
    }
}

前端发送 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>

关键细节：

1. @RequestBody：告诉 Spring 把 Request Body 里的 JSON 解析成对象。
2. Content-Type：前端必须设为 application/json。
3. 字段匹配：JSON 的 Key 必须与 DTO 的属性名一致（如 message）。

总结：三种模式对比

掌握这三种模式，基本能覆盖 90% 的 Web 交互需求。