这个post请求的2种编码格式老生常谈,经常会又小伙伴问题,之前也写过一篇讲的不是很明白,这里详细给大家讲一下,很有用处,基本涉及web开发都逃不掉,这里从前后台一起讲,脱离了前后台单独讲的都是耍流氓O(∩_∩)O
前端js如下,用的是qs;使用npm install qs安装,然后引入使用。
import qs from 'qs';
// post的content-type的格式需要设置成application/x-www-form-urlencoded,data就是post请求体。
let data = {code: 'fds', headImgUrl: '99', innerDemoVos: [{code: '篮球', name: '翠芳'}, {code: '台球', name: '小芳'}]};
// 将json对象转换成form表单的key&value的形式,包括复杂的数组对象,注意{arrayFormat: 'indices', allowDots: true}参数,一定要写,这个关系到数组对象转换成的格式后台是否可以解析,如果不写那么数组对象就是innerDemo[0].[code]: 篮球,这样后台是无法解析,只有innerDemo[0].code: 篮球的格式才可以解析,下面有图说明
console.info(qs.stringify(data, {arrayFormat: 'indices', allowDots: true}));
下图是f12查看的请求,将json对象转换成形如key&value的形式,复杂的数组对象也可以转换成。
这个是格式化之后的formdate数据
这是后台java接口
@PostMapping(value = "/form")
public String form(DemoVo demoVo) {
return "1";
}
对象
public class DemoVo {
private String code;
private String headImgUrl;
private List<InnerDemoVo> innerDemoVos;
}
集合对象
public class InnerDemoVo {
private String code;
private String name;
}
这样前台传过来后台这样接口,都可以完美接住。
直接传json对象
let data = {code: 'fds', headImgUrl: '99', innerDemoVos: [{code: '篮球', name: '翠芳'}, {code: '台球', name: '小芳'}]};
// 直接传json对象给后台
console.info(data);
f12查看请求格式
后台接受参数,只需要加上@RequestBody注解即可
@PostMapping(value = "/json")
public String json(@RequestBody DemoVo demoVo) {
return "1";
}
最后这种方式传参的时候,如果前端data对象里面多传了参数,而后台实体类没有这个属性,那么后台就报错,需要在实体类中添加@JsonIgnoreProperties(ignoreUnknown = true)注解,忽略未知字段,这里具体可以参考我写的这篇博客 传送门
本文地址:https://blog.csdn.net/qq_37054881/article/details/107523885
如对本文有疑问, 点击进行留言回复!!
offset、client、scroll (width,height、left,top、X,Y)
网友评论