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

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

发布时间：2026/8/3 9:03:06
前后端交互避坑指南：从登录到留言板 大家好很多新手小白在学习JavaSpringMVC的时候十分吃力特别是在学习前后端如何交互的时候如何传递参数如何接收参数明明知识点都会但是为什么会一直报错呢下面是我在学习过程中遇见的一些问题为了帮助大家更好学习我将通过登录案例留言板案例讲知识点串通起来文章末尾附全代码希望能够帮助到大家目录1.登录案例1.1判断输入是否正确并存储信息1.2返回信息1.3前端代码2.留言板重点总结易错登录案例代码留言板代码1.登录案例接口一判断输入的信息是否有效正确正确还需存储用户信息请求方式get参数用户姓名用户密码参数类型String返回类型Boolean接口二信息正确返回登录信息信息错误告知用户请求方式get返回值用户姓名返回类型String1.1判断输入是否正确并存储信息我们先从后端开始写根据接口文档描述我们要从客户端的请求中拿到登录用户的姓名和输入的密码判断这两个是否有效并且判断两者输入是否正确由于本文重点是讲解前后端交互过程所有我们暂时将用户姓名和密码定为“admin”后续再讲解如何从数据库中获取数据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!nulluserName.length!0可互换3.admin.equals(userName)判断用户输入的是否正确String判断相等使用equals方法建议把常数写在前面因为前面若是null会报异常而无法确定输入的userName是否是null4.Session可以存储用户信息并保存到服务器结束运行所以可以将用户信息存入Session中想了解更多Session知识可移步---Session​​​​​​1.2返回信息接口一返回到前端后前端会根据后端返回的来判断来选择是要告知用户输入错误还是返回正确的信息如果是显示正确的信息那需要发送请求给后端拿存储在Session中的有效信息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来写这部分对于走后端的同学可以不要求掌握看懂即可!DOCTYPE html html langen head meta charsetUTF-8 title登录页面/title /head body h1用户登录/h1 用户名input nameuserName typetext iduserNamebr 密码input namepassword typepassword idpasswordbr input typebutton value登录 onclicklogin() script srcjs/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!doctype html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0 meta http-equivX-UA-Compatible contentieedge title用户登录首页/title /head body 登录人: span idloginUser/span script srchttps://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传递的参数名要和发送给的后端的方法参数名一致除非使用RequestParam2.请求中的url要和后端的方法路径相对应一般是类路径/方法路径2.留言板重点接口一获取全部留言信息存储在List中可以用JSON来描述这个List数据.接口二发表新留言请求: body 也为 JSON 格式使用工具lombok新建List存放留言在刷新后发送给前端展示在留言板上public ListMessage listnew ArrayList(); RequestMapping(/r1) public ListMessage getMessage(){ return list; }用户输入留言点击提交后前端负责把留言发送给后端后端收到请求要先判断留言是否合规合规再把留言存储在lsit中在返回true如果不合规返回falseRequestMapping(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部分body div classcontainer h1留言板/h1 p classgrey输入后点击提交, 会将信息显示下方空白处/p div classrow span谁:/span input typetext name idfrom /div div classrow span对谁:/span input typetext name idto /div div classrow span说什么:/span input typetext name idsay /div input typebutton value提交 idsubmit onclicksubmit() !-- divA 对 B 说: hello/div -- /div script srcjs/jquery-4.0.0.min.js/script script load(); function load(){ //刷洗的时候就要获取list $.ajax({ type : get, url : message/r1, success : function (result){ if(result!nullresult.length()0){ for(var message of result){ var divE divmessage.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 divfrom 对 to 说: say/div; //3. 把节点添加到页面上 $(.container).append(divE); //4. 清空输入框的值 $(#from).val(); $(#to).val(); $(#say).val(); } } }); } /script /body这段代码的核心是:每次刷新的时候前端都会使用ajax发送请求给后端目的是拿到存储在后端之前保存下来的留言这样刷新之后依旧可以看到留言用户输入留言点击提交后前端调用submit方法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 divfrom 对 to 说: say/div; //3. 把节点添加到页面上 $(.container).append(divE); //4. 清空输入框的值 $(#from).val(); $(#to).val(); $(#say).val(); } } }); }创建变量获得input框的值发送请求给后端根据返回的result判断留言是否成功成功就把节点添加到页面上并清楚留言框里的值如果留言失败就跳出弹框告知失败总结易错1.拼写不要错误比如请求中的数据类型是contentType不要写成content-type2.前端向后端传递的数据类型是JSON的时候后端要用RequestBody进行参数绑定如果没有RequestBody,String无法找到数据同时前端传递json给后端Jackson会自动调用json转换成对象后端可以直接当做对象使用3.请求类型是get的时候不能传递jsonget请求没有请求体body不能传输复杂数据如果get要传输数据只能在查询字符串中输入参数类型是json时要使用post传递Get和Post对比GetPost数据位置查询字符串中请求体Body数据格式key1value1key2value2JSON\XML\复杂格式均可数据大小url限制大小无限制大小安全性内容暴露在url中相对安全但若未加密仍可通过抓包获得缓存可以被浏览器缓存默认不被缓存语义获取数据查询数据发送数据提交数据浏览器 服务端 | | | | | | 这是get请求没有请求体服务器等待请求体等不到报异常 |------发送Get请求------ | | | | | |------发送Post请求------| 这是Post请求有请求体服务器解析请求体拿到数据后端传递参数格式后端传递类型前端拿到的初始状态前端操作application/json较多使用自动转成对象可以进行xx.操作之间取值text/plain字符串要手动转成json对象才能取值将contentType定义成application/json常出现在返回字符串的时候。告诉前端把这个字符串按json处理如果不定义那在传的时候前端可能会当成普通字符串就需要前端自己手动调用JSON.parse()把字符串转成对象前端向后端发送json和js对象的区别重点JS对象常用JSON实际输出内容JSON字符串JSON字符串前端代码怎么写{namezhangsan}{namezhangsan}是否需要手动序列化不需要需要调用JSON.Stringify()后端收到jsonjson后端向前端发送json和js的区别对象常用JSON实际输出内容JSONJSON后端代码怎么写return 对象return {\name:\zhangsan\};是否需要手动序列化不用spring自己调用需要程序员手动拼写字符串前端拿到js对象js对象后端如果发送的是对象在传输过程中一定是会进行序列化转成字符串到前端后在进行反序列化变成js对象使用总结前端后端传递对象比较多但是无论是前端还是后端在网络运输的过程中对象都会序列化成jsonjson相当于是通用的语音到达之后再将json反序列化成对象取值如果后端传递的是字符串长得像json而不是普通文本如“操作成功”这些没必要转建议修改contentType为application/json告诉前端把这个字符串当成json处理让它自动转成对象附代码登录案例代码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(); } }!DOCTYPE html html langen head meta charsetUTF-8 title登录页面/title /head body h1用户登录/h1 用户名input nameuserName typetext iduserNamebr 密码input namepassword typepassword idpasswordbr input typebutton value登录 onclicklogin() script srcjs/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!doctype html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, minimum-scale1.0 meta http-equivX-UA-Compatible contentieedge title用户登录首页/title /head body 登录人: span idloginUser/span script srchttps://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留言板代码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 ListMessage listnew ArrayList(); RequestMapping(/r1) public ListMessage 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; } }!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 classcontainer h1留言板/h1 p classgrey输入后点击提交, 会将信息显示下方空白处/p div classrow span谁:/span input typetext name idfrom /div div classrow span对谁:/span input typetext name idto /div div classrow span说什么:/span input typetext name idsay /div input typebutton value提交 idsubmit onclicksubmit() !-- divA 对 B 说: hello/div -- /div script srcjs/jquery-4.0.0.min.js/script script load(); function load(){ //刷洗的时候就要获取list $.ajax({ type : get, url : message/r1, success : function (result){ if(result!nullresult.length()0){ for(var message of result){ var divE divmessage.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 divfrom 对 to 说: say/div; //3. 把节点添加到页面上 $(.container).append(divE); //4. 清空输入框的值 $(#from).val(); $(#to).val(); $(#say).val(); } } }); } /script /body /html以上均属个人学习心得如有错误请多多指教