当前位置： 代码网 > it编程>编程语言>Java > SpringBoot的前后端联调：表单提交、AJAX登录与状态管理、以及JSON数据交互

SpringBoot的前后端联调：表单提交、AJAX登录与状态管理、以及JSON数据交互

2026年04月26日 • Java •我要评论
作为 spring boot 初学者，理解后端接口的编写和前端页面的交互至关重要。本文将通过三个经典的 web 案例——表单提交、ajax 登录与状态管理、以及 json 数据

作为 spring boot 初学者，理解后端接口的编写和前端页面的交互至关重要。本文将通过三个经典的 web 案例——表单提交、ajax 登录与状态管理、以及 json 数据交互——带您掌握前后端联调的核心技巧和 spring boot 的关键注解。

本文通过三个web案例（表单提交、ajax异步交互与状态管理、json数据传输与rest式接口）演示springboot的前后端联调,案例一展示表单提交的与参数绑定,案例二展示aj异步交互与session状态管理,案例三演示json数据传输与rest式接口,每个案例详述了后端注解与前端代码,解析了联调重点,通过这些案例,读者能能学到如何在实际项目中实现前后端有效沟通

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

1.2 前端代码：calc.html
1.2 前端代码：calc.html_结果

📋 html 代码

<!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 #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">
            数字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>

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

  • 前端 form 的 name 属性：前端 <input name="num1"> 中的 name 必须与后端方法的参数名 integer num1 完全一致。
  • 后端自动类型转换：spring boot 会自动将 http 请求中的字符串参数转换为 java 方法所需的 integer 类型。

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

本案例引入 ajax 实现无刷新登录，并利用 session 在服务器端保存用户状态。

2.1 后端代码：usercontroller.java和person.java

usercontroller.java(核心逻辑)

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 "";
    }
}

person.java(实体类)

虽然未直接用于登录，但作为 javabean 演示参数绑定基础。

package cn.overthinker.springboot;

// 略：包含 name, password, age 属性及其 getter/setter 和 tostring 方法
public class person {
    // ... 属性、getter/setter、tostring ...
}

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

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

使用 jquery ajax 进行异步登录，用户体验更好。

login.html(登录页面)

<!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>

index.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>

2.3 联调重点解析：ajax 与 session

  • ajax (asynchronous javascript and xml)：允许前端在不刷新页面的情况下，与后端进行数据交换。在 login.html 中，我们使用 jquery 的 $.ajax 实现异步请求。
  • session 机制：session 是服务器端用来存储用户状态信息的机制。
    • 当用户登录成功后，session.setattribute("loginuser", username); 在服务器上创建或关联一个 session，并存入数据。
    • 浏览器通过 cookie 自动携带一个 session id 给服务器。
    • 在 index.html 请求 /user/getloginuser 时，服务器通过浏览器传来的 session id 找到对应的 session，从而取出存储的 loginuser 信息，实现了状态保持。

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

本案例是现代 web 开发最常用的方式：前后端通过 json 格式进行数据交互，后端使用 restful 风格的接口。

3.1 后端代码：messagecontroller.java和messeageinfo.java

messagecontroller.java(核心逻辑)

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;
    }
}

messeageinfo.java(数据传输对象 dto)

使用 lombok 的 @data 注解自动生成 getter/setter。

package cn.overthinker.springboot;

import lombok.data;

@data // lombok 注解，自动生成 getter/setter, tostring, equals等方法
public class messeageinfo {
    private string from;
    private string to;
    private string message; // 注意：前端传的字段名是 message
}

3.2 前端代码：message.html

3.2 前端代码：message.html

前端使用 ajax 发送 json 格式的数据。

📋 html 代码

<!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: "/message/publish",
                // 1. 设置 content-type 为 application/json
                contenttype: "application/json",
                // 2. 使用 json.stringify 将 js 对象转换为 json 字符串
                data: json.stringify({
                    from: from,
                    to: to,
                    // 注意：前端字段名为 message，与后端 dto 匹配
                    message: say 
                }),
                success: function (result) {
                    if (result) {
                        // 提交成功后重新加载列表
                        loadmessages(); 

                        // 清空输入框
                        $('#from').val("");
                        $('#to').val("");
                        $('#say').val("");
                    } else {
                        alert("添加留言失败，请检查输入");
                    }
                }
            });
        }
    </script>
</body>
</html>

3.3 联调重点解析：@requestbody与 json

  • @requestbody：这是 spring boot 接收 json 数据的关键注解。它告诉 spring mvc：请将 http 请求体（request body）中的 json 字符串解析，并自动映射到方法参数 messeageinfo messeageinfo 对象中。
  • 前端 contenttype: "application/json"：前端必须设置此头信息，告诉服务器发送的是 json 格式数据。
  • 前端 json.stringify(...)：javascript 的内置方法，用于将一个 js 对象（如 {from: 'a', to: 'b', message: 'hello'}）转换为后端能够识别的 json 字符串。
  • json 字段匹配：前端 json 中的键（key）必须与后端 dto (messeageinfo) 中的属性名（field name）保持一致（例如：message 对应 private string message;）。

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

联调模式案例核心机制后端注解/参数接收优点缺点
form 表单提交求和计算器浏览器直接跳转/刷新页面方法参数名匹配简单、无需 javascript用户体验差、无法精细控制
ajax (query string)登录系统 (get/post)异步通信（无刷新）方法参数名匹配用户体验好、可局部更新仅适用于少量简单数据
ajax (json)留言板异步通信（无刷新）@requestbody 接收 dto传输复杂结构数据、最常用需要配置 content-type 和 json.stringify

到此这篇关于springboot的前后端联调：表单提交、ajax登录与状态管理、以及json数据交互的文章就介绍到这了,更多相关springboot的后端接口和前端页面的交互内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！

赞 (0)

相关文章:

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

发表评论

验证码：
最近更新的文章
推荐阅读
大家感兴趣的文章
Copyright © 2017-2026  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱：2386932994@qq.com