前后端交互避坑指南：从登录到留言板

2501_933923252026-08-03 9:56

大家好，很多新手小白在学习JavaSpringMVC的时候十分吃力，特别是在学习前后端如何交互的时候，如何传递参数？如何接收参数？明明知识点都会，但是为什么会一直报错呢？下面是我在学习过程中遇见的一些问题，为了帮助大家更好学习，我将通过登录案例+留言板案例讲知识点串通起来，文章末尾附全代码，希望能够帮助到大家！

目录

1.登录案例

1.1判断输入是否正确并存储信息

1.2返回信息

1.3前端代码

2.留言板（重点）

总结易错

登录案例代码

留言板代码

1.登录案例

接口一：判断输入的信息是否有效正确，正确还需存储用户信息

请求方式：get

参数：用户姓名，用户密码

参数类型：String

返回类型：Boolean

接口二：信息正确，返回登录信息，信息错误，告知用户

请求方式：get

返回值：用户姓名

返回类型：String

1.1判断输入是否正确并存储信息

我们先从后端开始写，根据接口文档描述，我们要从客户端的请求中拿到登录用户的姓名和输入的密码，判断这两个是否有效并且判断两者输入是否正确，由于本文重点是讲解前后端交互过程，所有我们暂时将用户姓名和密码定为"admin"，后续再讲解如何从数据库中获取数据

java 复制代码 
@RestController
@RequestMapping("/login")
public class Controller {
    //判断
    @RequestMapping("/r1")
    public Boolean loginJudge(String userName, String password, HttpSession session){
        if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){
            return false;
        }
        if("admin".equals(userName)||"admin".equals(password)){
            return false;
        }
        //利用Session存储用户信息
        session.setAttribute("userName",userName);
        return true;

    }
}

注意事项：

1.如果是使用@Controller注解，还需要添加@RequestBody。因为前端向后端传递的参数是String类型

2.StringUtils.hasLength(userName)相当于userName!=null&&userName.length!=0，可互换

3."admin".equals(userName)判断用户输入的是否正确，String判断相等使用equals方法，建议把常数写在前面，因为前面若是null会报异常，而无法确定输入的userName是否是null

4.Session可以存储用户信息，并保存到服务器结束运行，所以可以将用户信息存入Session中，想了解更多Session知识可移步---> Session​​​​​​

1.2返回信息

接口一返回到前端后，前端会根据后端返回的来判断来选择是要告知用户输入错误还是返回正确的信息，如果是显示正确的信息，那需要发送请求给后端拿存储在Session中的有效信息

java 复制代码 
  @RequestMapping("/r2")
    public String getName(HttpSession session) {
        String name = session.getAttribute("userName").toString();
        return name;
    }

注意事项：

1.获取存储在Session中的信息，使用getAttribute方法，参数要和前面设置的key名一样

2.session.getAttribute("userName")的返回类型为Object类，要将其转化为String，使用toString。

1.3前端代码

用户在浏览器页面输入信息点击提交后，要把用户输入的信息传递给后端，让后端来判断是否正确，所以在点击提交之后，前端需要写请求将数据发送给后端，下面我们将使用ajax来写（这部分对于走后端的同学可以不要求掌握，看懂即可）

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名：<input name="userName" type="text" id="userName"><br>
  密码：<input name="password" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">
  
  <script src="js/jquery-4.0.0.min.js"></script>
  <script>
    function login() {
      $.ajax({
        type: "post",
        url: "login/r1",
        data: {
          userName: $("#userName").val(),
          password: $("#password").val()
        },
        success: function (resule) {
          if (resule) {
              location.assign("index.html");
          }else {
            alert("登录失败");
          }
        }
      });
    }
  </script>
</body>

</html>
html 复制代码 
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录首页</title>
</head>

<body>
    登录人: <span id="loginUser"></span>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
$.ajax({
    type:"post",
    url:"login/r2",
    success: function (userName){
        $("#loginUser").text(userName);
    }
});
    </script>
</body>

</html>

注意事项：

1.前端向后端发送请求的时候，如果需要传输数据data，传递的参数名要和发送给的后端的方法参数名一致，除非使用@RequestParam

2.请求中的url要和后端的方法路径相对应，一般是类路径/方法路径

2.留言板（重点）

接口一：获取全部留言信息，存储在List中，可以用JSON来描述这个List数据.

接口二：发表新留言
请求: body 也为 JSON 格式

使用工具：lombok

新建List存放留言，在刷新后发送给前端，展示在留言板上

java 复制代码 
public List<Message> list=new ArrayList<>();
    @RequestMapping("/r1")
    public List<Message> getMessage(){
        return list;
    }

用户输入留言点击提交后，前端负责把留言发送给后端，后端收到请求，要先判断留言是否合规，合规再把留言存储在lsit中，在返回true，如果不合规，返回false

java 复制代码 
@RequestMapping(value = "/r2",produces = "application/json")
    public Boolean judge( @RequestBody Message message){//参数绑定
        if(!StringUtils.hasLength(message.getFrom())||!StringUtils.hasLength(message.getMessage())||!StringUtils.hasLength(message.getTo())){
            return false;
        }
        list.add(message);
        return true;
    }

注意：

1.produces = "application/json"表示后端返回响应的数据格式为json，如果不加，前端不能拿到对象，而是字符串，要手动调用JSON.parse()把格式转换成对象

2.前端传递过来的json要用注解@RequestBody 绑定给message对象，spring会自动把json转换为对象方便使用

前端代码（body部分）

html 复制代码 
<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>

    <script src="js/jquery-4.0.0.min.js"></script>
    <script>
         load();
         function load(){
             //刷洗的时候就要获取list
             $.ajax({
                type : "get",
                 url : "message/r1",
                 success : function (result){
                    if(result!=null&&result.length()>0){
                        for(var message of result){
                            var divE = "<div>"+message.from +"对" + message.to + "说:" + message.message+"</div>";
                            //3. 把节点添加到页面上
                            $(".container").append(divE);
                        }
                    }

                 }
             });
         }
        function submit(){
            //1. 获取留言的内容
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') {
                return;
            }$.ajax({
               type: "post",
               url:"message/r2",
               contentType : "application/json",
                data : JSON.stringify({
                    from :from,
                    to: to,
                    message:say
                }),
                success : function (result){
                   if(!result){
                       alert("留言失败！");
                   }else {
                       //2. 构造节点
                       var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
                       //3. 把节点添加到页面上
                       $(".container").append(divE);

                       //4. 清空输入框的值
                       $('#from').val("");
                       $('#to').val("");
                       $('#say').val("");
                   }
                }
            });

        }
        
    </script>
</body>

这段代码的核心是:

每次刷新的时候前端都会使用ajax发送请求给后端，目的是拿到存储在后端之前保存下来的留言，这样刷新之后依旧可以看到留言

用户输入留言点击提交后，前端调用submit方法

html 复制代码 
 function submit(){
            //1. 获取留言的内容
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') {
                return;
            }$.ajax({
               type: "post",
               url:"message/r2",
               contentType : "application/json",
                data : JSON.stringify({
                    from :from,
                    to: to,
                    message:say
                }),
                success : function (result){
                   if(!result){
                       alert("留言失败！");
                   }else {
                       //2. 构造节点
                       var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
                       //3. 把节点添加到页面上
                       $(".container").append(divE);

                       //4. 清空输入框的值
                       $('#from').val("");
                       $('#to').val("");
                       $('#say').val("");
                   }
                }
            });

        }

创建变量获得input框的值，发送请求给后端，根据返回的result判断留言是否成功，成功就把节点添加到页面上并清楚留言框里的值，如果留言失败，就跳出弹框告知失败

总结易错

1.拼写不要错误，比如请求中的数据类型是contentType，不要写成content-type

2.前端向后端传递的数据类型是JSON的时候，后端要用@RequestBody进行参数绑定，如果没有@RequestBody,String无法找到数据，同时，前端传递json给后端，Jackson会自动调用json转换成对象，后端可以直接当做对象使用

3.请求类型是get的时候，不能传递json，get请求没有请求体（body），不能传输复杂数据，如果get要传输数据，只能在查询字符串中输入，参数类型是json时，要使用post传递

|------|-----------------------------|--------------------|
| | Get | Post |
| 数据位置 | 查询字符串中 | 请求体（Body） |
| 数据格式 | ？key1=value1&&key2=value2 | JSON\XML\复杂格式均可 |
| 数据大小 | url限制大小 | 无限制大小 |
| 安全性 | 内容暴露在url中 | 相对安全，但若未加密仍可通过抓包获得 |
| 缓存 | 可以被浏览器缓存 | 默认不被缓存 |
| 语义 | 获取数据（查询数据） | 发送数据（提交数据） |
[Get和Post对比]

java 复制代码 
浏览器                       服务端
   |                       |   
   |                       |   
   |                       |   这是get请求，没有请求体，服务器等待请求体，等不到，报异常
   |------发送Get请求------ |
   |                       | 
   |                       | 
   |------发送Post请求------|   这是Post请求，有请求体，服务器解析请求体拿到数据

|------------------------|-----------|-----------------|
| 后端传递类型 | 前端拿到的初始状态 | 前端操作 |
| application/json（较多使用） | 自动转成对象 | 可以进行xx.操作之间取值 |
| text/plain | 字符串 | 要手动转成json对象才能取值 |
[后端传递参数格式]

将contentType定义成application/json常出现在返回字符串的时候。告诉前端把这个字符串按json处理，如果不定义，那在传的时候前端可能会当成普通字符串，就需要前端自己手动调用JSON.parse()把字符串转成对象

前端向后端发送json和js对象的区别（重点）

|-----------|-------------------|----------------------|
| | JS对象（常用） | JSON |
| 实际输出内容 | JSON字符串 | JSON字符串 |
| 前端代码怎么写 | {name="zhangsan"} | {"name"="zhangsan"} |
| 是否需要手动序列化 | 不需要 | 需要调用JSON.Stringify() |
| 后端收到 | json | json |

后端向前端发送json和js的区别

|-----------|---------------|--------------------------------------|
| | 对象（常用） | JSON |
| 实际输出内容 | JSON | JSON |
| 后端代码怎么写 | return 对象； | return " {\"name":\"zhangsan\"}"; |
| 是否需要手动序列化 | 不用，spring自己调用 | 需要程序员手动拼写字符串 |
| 前端拿到 | js对象 | js对象 |

后端如果发送的是对象，在传输过程中一定是会进行序列化转成字符串，到前端后，在进行反序列化，变成js对象使用
总结：前端后端传递对象比较多，但是无论是前端还是后端，在网络运输的过程中，对象都会序列化成json，json相当于是通用的语音，到达之后再将json反序列化成对象取值，如果后端传递的是字符串（长得像json而不是普通文本，如"操作成功"这些没必要转），建议修改contentType为"application/json"告诉前端把这个字符串当成json处理，让它自动转成对象

附代码

登录案例代码

java 复制代码 
package com.by.demo;

import ch.qos.logback.core.util.StringUtil;
import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: Administrator
 * Date: 2026-08-01
 * Time: 21:21
 */
@RequestMapping("/login")
@RestController
public class loginController {
    //两个接口，一个是判断登录信息是否正确，一个是向前端传递登录用户姓名
    @RequestMapping("/judge")
    public Boolean judgeLoginMessage(String userName, String password, HttpSession session){
        if(StringUtils.hasLength(userName)&&StringUtils.hasLength(password)){
            if("admin".equals(userName)&&"admin".equals(password)){
                //把用户信息存储到会话中，方便返回用户姓名
                session.setAttribute("userName",userName);
                return  true;
            }else {
                return false;
            }
        }else {
            return  false;
        }

    }

    @RequestMapping("/getuserName")
    public String getUserName(HttpSession session){
        //从会话中得到userName，要把userName存储到会话中
        return session.getAttribute("userName").toString();
    }
}
html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>

<body>
  <h1>用户登录</h1>
  用户名：<input name="userName" type="text" id="userName"><br>
  密码：<input name="password" type="password" id="password"><br>
  <input type="button" value="登录" onclick="login()">
  
  <script src="js/jquery-4.0.0.min.js"></script>
  <script>
    function login() {
      $.ajax({
        type: "post",
        url: "login/judge",
        data: {
          userName: $("#userName").val(),
          password: $("#password").val()
        },
        success: function (resule) {
          if (resule) {
              location.assign("index.html");
          }else {
            alert("登录失败");
          }
        }
      });
    }
  </script>
</body>

</html>
html 复制代码 
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户登录首页</title>
</head>

<body>
    登录人: <span id="loginUser"></span>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
$.ajax({
    type:"post",
    url:"login/getuserName",
    success: function (userName){
        $("#loginUser").text(userName);
    }
});
    </script>
</body>

</html>

留言板代码

java 复制代码 
package com.by.demo;

import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

/**
 * Created with IntelliJ IDEA.
 * Description:
 * User: Administrator
 * Date: 2026-08-02
 * Time: 11:06
 */
@RequestMapping("/message")
@RestController
public class MessageController {
public List<Message> list=new ArrayList<>();
    @RequestMapping("/r1")
    public List<Message> getMessage(){
        return list;
    }
    @RequestMapping(value = "/r2",produces = "application/json")
    public Boolean judge( @RequestBody Message message){//参数绑定
        if(!StringUtils.hasLength(message.getFrom())||!StringUtils.hasLength(message.getMessage())||!StringUtils.hasLength(message.getTo())){
            return false;
        }
        list.add(message);
        return true;
    }
}
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>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>

    <script src="js/jquery-4.0.0.min.js"></script>
    <script>
         load();
         function load(){
             //刷洗的时候就要获取list
             $.ajax({
                type : "get",
                 url : "message/r1",
                 success : function (result){
                    if(result!=null&&result.length()>0){
                        for(var message of result){
                            var divE = "<div>"+message.from +"对" + message.to + "说:" + message.message+"</div>";
                            //3. 把节点添加到页面上
                            $(".container").append(divE);
                        }
                    }

                 }
             });
         }
        function submit(){
            //1. 获取留言的内容
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') {
                return;
            }$.ajax({
               type: "post",
               url:"message/r2",
               contentType : "application/json",
                data : JSON.stringify({
                    from :from,
                    to: to,
                    message:say
                }),
                success : function (result){
                   if(!result){
                       alert("留言失败！");
                   }else {
                       //2. 构造节点
                       var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
                       //3. 把节点添加到页面上
                       $(".container").append(divE);

                       //4. 清空输入框的值
                       $('#from').val("");
                       $('#to').val("");
                       $('#say').val("");
                   }
                }
            });

        }
        
    </script>
</body>

</html>

以上均属个人学习心得，如有错误请多多指教！

相关推荐
蓝速科技2 小时前
蓝速科技丨双屏翻译机重构跨国商务沟通的交互范式
科技·重构·交互
熊猫钓鱼>_>4 天前
ArkTS 装饰器总览：V1 / V2 / 通用装饰器完整学习笔记
笔记·学习·华为·交互·harmonyos·arkts·arkweb
lialaka4 天前
「声纹迷宫（Acoustic Labyrinth）」：具身交互智能驱动的实时声学解构与全双工语音数字人控制台
人工智能·3d·交互
熊猫钓鱼>_>4 天前
ArkTS 基础入门：从零搭建第一个交互页面
华为·架构·交互·ts·harmonyos·arkts·鸿蒙
lialaka4 天前
「极客智库（The Architect‘s Nexus）」——全语音 3D AI 首席架构师与具身交互智能会话推演舱
人工智能·3d·交互
xingxiliang6 天前
AI 智能耳机 / IoT 穿戴设备语音交互评测体系
人工智能·物联网·交互
Tangyuewei7 天前
交互熵：AI 编程工具的下一站不是聪明，是靠谱
人工智能·交互
小龙报7 天前
远控功能哪个全？2026六款远控横评实测
实时互动·音视频·交互
热门推荐
0100 Debian字符界面如何支持中文02GitHub 镜像站点03如何新建文件夹？ 电脑新建文件夹的4种方法04国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）052026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？08AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路092026开年大模型最新对比解析及场景落地指南10历年考研数学一、数学二、数学三真题试卷及答案PDF