Spring Boot 中的前后台数据交互方式_springboot中前后端怎么交换数据-优快云博客

本文链接：https://blog.youkuaiyun.com/LinzhiQQQ/article/details/80632545

本文详细介绍了Spring框架下，前后端数据交互的多种方式，包括Form表单提交、Ajax请求、对象类数据传递、文件上传等场景，并探讨了不同情况下数据的处理和返回策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Java Web 项目里的前台与后台之间的交互是一个重点

今天记录Spring 框架下前后台数据交互的方式

1.Form 表单 + request 方式

前端提交表单

<div class="container" >
    <form action="/admin/login" method="post">
        <input type="text" name="adminId">
        <input type="password" name="pwd">
        <input type="submit" value="提交">
    </form>
</div>

注意，name属性是后台获取数据的依据，一定不要随便乱写，方法要指明，否则默认为 GET

@RequestMapping("/login")
public ModelAndView login(HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException{
    ModelAndView mv = new ModelAndView();
    String adminId = request.getParameter("adminId");
    String pwd = request.getParameter("pwd");
    mv.addObject("admin",admin);
    mv.setViewName("adminPage");
    return mv;
}

用 request.getParameter(表单数据 name) 获取到数据，如果是直接的表单 form，就需要用 ModelAndView 做数据的传输加页面的跳转 ModelAndView.setViewName() 设置跳转的页面 addObject() 添加传输到前台的数据

跳转页面之后如何取出 ModelAndView 里面带的数据呢？

JSP：使用 EL 表达式 ${对象.属性} 即可，但是对象名是 addObject("对象名", object ) 时设置的

FreeMarker: FreeMarker 的取值方式与 JSP 类似，也是使用类似EL表达式的 ${对象名.属性名}

Thymeleaf: <span th:text="${book.author.name}"> <li th:each="book : ${books}">

2. Ajax + request

页面上进行 Ajax 提交

function test() {
    var token = getCookie("token");
    var data = {
        hi:"hello"
    };
    $.ajax({
        url:"/admin/token/show",
        data:data,
        type:"post",
        cache:false,
        dataType:"json",
        success :function (data) {
            alert(data.msg);
        },
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Authorization", token);
        },
        error : function (data) {
            alert("请求超时");
        }
    })
}

后台数据的提取与前面是一样的，但是返回值类型不一样，Ajax请求完成之后是要返回到当前页面的，所以我们不在后台用

ModelAndView进行页面的跳转，我们得把数据传回原页面

@ResponseBody
@RequestMapping("/token/show")
public Map show(HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException{
    Map<String,Object> result = new HashMap<>();
    result.put("status",true);
    result.put("msg","ok");
    return result;
}

注意，如果返回的是数据，必须加上 @ResponseBody 注解，或者是在 Controller 类添加 @RestController

如果Ajax选择的返回值类型是 Json，那么建议我们controller 里的方法的返回值使用 Map

前端 Ajax 收到返回后再做其他处理

3.使用Spring注解 @Vaild 对象类对象名传递数据

<body>
    姓名：<input type="text" id="name" name="name"/><br/>
    年龄：<input type="text" id="age" name="age"/><br/>
    <input type="button" onclick="submitData()" value="提交"/>
</body>

Ajax的传递时一定要注意传递的 Key 的命名， Key ：Value 中 Key的命名需要与对象的属性名一致

例如：Student 对象有属性 name，age

那么 Ajax 需要这么写

<script>
    function submitData() {
        var data = {
            name : $("name").val(),
            age : $("$age").val()
        }
        var url = "/stu/login"
        $.ajax({
            url : url,
            type : "post",
            data : data,
            dataType : "json",
            cache : false,
            success : function (data) {
                if(data.status == true){
                    alert("ok");
                }else{
                    alert("false");
                }
            },
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Authorization", token);
            },
            error : function () {
                alert("请求超时");
            }
        })
    }
</script>

这么写了之后，后台就可以用Student对象类的数据类型取获取数据了

不一定Student类的所有属性值都要有注入，有个别的甚至没有都是可以的

@RequestMapping("/add")
public String add(@Valid Student student, BindingResult bindingResult){
    if(bindingResult.hasErrors()){
        return bindingResult.getFieldError().getDefaultMessage();
    }else{
        ...
        return "添加成功";
    }
}

这样取出来的 student 对象里会自动注入 name 和 age 属性，前提是你的Student类里面对这些属性都写了Getter 和 Setter方法

4.Ajax 提交 Form 表单

function updateImg(x) {
    var form = new FormData(x);
    var url = myPath+"/upload/stuImg";
    $.ajax({
        url:url,
        data:form,
        type:'post',
        processData:false, 
        contentType:false,
        success : function(data){
            if(data.status == true){
                alert("更新成功");
                window.location.reload();
            }else{
                alert(data.msg);
            }
        },
        error : function(data){
            alert("连接超时");
        }
    });
}

processData:false表示传输的是二进制数据，根据情景使用

5.使用编号访问同页面不同数据的方式

@RequestMapping("/preUpdate/{id}")
public ModelAndView preUpdate(@PathVariable("id")Integer id){
    ModelAndView mav=new ModelAndView();
    mav.addObject("book", bookDao.getOne(id));
    mav.setViewName("bookUpdate");
    return mav;
}

提交表单或Ajax时的 url 后面跟上id 如： localhost:8080/user/preUpdate/2

6.使用 Get 方法是 url 后跟的参数可以直接传输

@GetMapping("/delete")
public String delete(Integer id){
    bookDao.delete(id);
    return "forward:/book/list";
}

如这里删除需要 id ，那么就再 Get Url后面跟 id 参数

如 localhost:8080/user/delete?id=2

7.使用 @RequestPara 注解

@RequestMapping(value="/index")
public String helloaction(@RequestParam(value="name",required=false)String myName, Model model){ 
    //name要与前端提交Key一致，将name的值注入myName
    System.out.println(myName);
    model.addAttribute("hello", "这是用action传过来的值："+myName);
    return "index";
}

Spring 前后端之间数据的交互方式非常多，没有哪种更好，是有哪种比较适合