axios post 请求类型和 SpringBoot 参数接收知识

编程入门 行业动态 更新时间:2024-10-10 23:18:45

axios post 请求类型和 SpringBoot <a href=https://www.elefans.com/category/jswz/34/1771441.html style=参数接收知识"/>

axios post 请求类型和 SpringBoot 参数接收知识

背景

axios 是一个易用、简洁且高效的 http 库,在 Vue 开发中常用于数据传输,笔者今年开发是就用的这个库。axios 提交请求时, headers 中的 content-type 如果和后台接收方式不一致,就会产生错误,比如后台收到的参数是 null ,或者是前端 js 报错等。

本文就来总结一下 axios 提交 post 请求时,axios post 请求类型和 SpringBoot 参数接收方式的对应关系。

JSON 数据提交

如果需要直接将前端的 JSON 数据提交,可以用 application/json 类型。

axios 发送 post 请求时,默认的 request 头域中 Content-Type 是 application/json,此时后台 Controller 接收时必须使用 @RequestBody 注解接收,这适用于复杂 JSON 对象的传递,可以直接将前端的复杂对象转换为后台对象实例。

这种方式比较简单且好用,把页面操作的对象直接作为参数就可以:

this.$axios.post(submitUrl, targetData)

这里的 targetData 就是页面上的 JSON 对象,浏览器的头域类型为:

上面中传递的参数一定要用JSON.stringify(paramdata); 方法将参数转换成json格式的字符串; 因为SpringBoot 中@RequestBody注解要求的必须是json格式的字符串才能注入参数, 第二就是大坑, 大坑, 大坑, 请求中必须 带上请求头,不然会报下面错误

表单提交

表单提交时,请求数据类型为 application/x-www-form-urlencoded ,此时后台接收参数不能用 @RequestBody 注解。

提交表单数据有两种方式,一种是用 FormData 拼接表单数据,一类是用 Qs 序列化。

FormData 方式

如果需要使用常规表单方式提交数据,可以使用 FormData,它的本质就是转换为常规的页面表单,以 &key=value 的形式组装请求参数。

比如这个批量删除操作:


后台接收参数 ids 是一个数组:


使用 FormData 提交时,请求头域为:

Qs 方式

例如,这个添加一个分组信息的功能,分组信息是一个普通的 js 对象,使用表单方式提交时,前台引入:

import Qs from 'qs';

提交代码时使用 stringfy 对参数


后台用普通对象接收,不能使用注解

启示录

本文总结了 post 请求参数发送的三种方式,笔者一直用的是第一种,但是由于项目开发过程中,不同模块的开发人员,后台接收请求参数的方式不同,也碰到过后面两种接收方式。索性就认真对比了一下,彻底搞明白算了。

技术也是欺生的,下点决心搞明白了,也没啥,毕竟表单提交也不是什么新东西!

更多推荐

axios post 请求类型和 SpringBoot 参数接收知识

本文发布于:2024-03-14 12:43:59,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1736498.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:参数   类型   知识   axios   post

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!