Spring Boot 中的前后台数据交互方式

本文详细介绍了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 前后端之间数据的交互方式非常多,没有哪种更好,是有哪种比较适合

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值