axios发送post请求后端SpringBoot无法解析问题

最新推荐文章于 2024-04-16 14:48:10 发布

原创最新推荐文章于 2024-04-16 14:48:10 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#后端 #spring boot #java #前端 #json

本文介绍了如何在axios中将默认的json请求改为发送表单数据，通过修改Content-Type和使用FormData，实现通过@RequestParam接收分页参数的示例。

使用axios发送post请求时，默认发送格式为json，所以后端必须使用@RequestBody来接收，并且自动封装为后端对象，

但如果发送的post请求数据不值得封装为对象（如只发送分页数据page），便会显得冗余，此时可以将其封装为Map类型

若想通过@RequestParam()来接收，前端发送的数据必须为表单提交类型的键值对，

此时需要修改axios的默认配置headers为键值对类型

axios.post("/select",bookPage,
          {
            //axios默认发送json，@ResquesParam默认接收键值对
            //修改headers配置
            headers: {
              'Content-Type': "application/x-www-form-urlencoded;charset=utf-8"
            },
          }
        )

当修改'Content-Type': "application/x-www-form-urlencoded;charset=utf-8" 后，post发送数据的方式不能再为json对象 { }，只能是FormData类型

所以要new一个FromData()

let bookPage = new FormData();

bookPage.append("page",page);

axios.post("/select",bookPage,
          {
            //axios默认发送json，@ResquesParam默认接收键值对
            //修改headers配置
            headers: {
              'Content-Type': "application/x-www-form-urlencoded;charset=utf-8"
            },
          }
        ).then((response)=>{
          this.books = response.data
        }).catch((error)=>{
          console.log(error)
        })

此时成功