POST请求content-type设置application/x-www-form-urlencoded或application/json后台如何接收

一、导读

这个post请求的2种编码格式老生常谈，经常会又小伙伴问题，之前也写过一篇讲的不是很明白，这里详细给大家讲一下，很有用处，基本涉及web开发都逃不掉，这里从前后台一起讲，脱离了前后台单独讲的都是耍流氓O(∩_∩)O

二、post编码是content-type:application/x-www-form-urlencoded

1. 首先这种格式的是form表单的格式传统的$(“form”).serialize()就是将数据变成形如key&value的格式，然后传给后台解析，当然现如今serialize()在vue/angula/react等前端框架中都不怎么用了，如果要使用这种编码传输，可以使用npm的qs。qs就脱离form表单，直接将josn对象转换成形如key&value。所以使用这种编码的psot请求，如果是老项目可以直接只用serialize()，新的单页面应用的前端框架可以使用qs来达到同样的效果。

2. 示例：

前端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数据

3. 后台java接收参数

这是后台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;
}

这样前台传过来后台这样接口，都可以完美接住。

三、post编码是content-type:application/json

1. 这种编码格式现在比较流行推荐使用，前端操作简单，不用像上面的转key&value的形式。

2. 示例：

直接传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