Axios使用Post向Spring传递POJO对象的三种方法(@RequestBody与@RequestParam注解)

Posted 卉卉不会写代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Axios使用Post向Spring传递POJO对象的三种方法(@RequestBody与@RequestParam注解)相关的知识,希望对你有一定的参考价值。

在开始前,先介绍一下下面这两个方法

JSON.stringify()

将对象变成json格式的字符串

  • 例:JSON.stringify( id:1,name:“小明” )
    转换后就变为: “id”:“1”,“name”:“小明”
this.$qs.stringify()

将参数拼接为url传参的形式

  • 例:this.$qs.stringify(id:1,name:“小明”)
    转换后就变为:id=1&name=小明

(但实际上使用post方式传递时,参数值为中文时会进行url转码,否则会产生歧义)

一. 使用@RequestBody(传递单个对象适用)

Controller控制层使用@RequestBody注解接收对象参数时:

  1. Axios需设置响应头参数context-type为application/json,设置方式与ajax不同,需写在headers内。

  2. 使用JSON.stringify(对象),将需传递到后端的对象序列化成json格式的字符串。

this.$axios(
    method: 'post',
    url: '/queryUser',
    headers:
    	'Context-Type': 'application/json' // 1
    ,
    data: JSON.stringify(this.user) // 2
).then((res) => 
    console.log(res.data)
);
  1. Controller需在形参对象前加上@RequestBody注解,因为注解带有反序列化机制,可将前端送来的json格式的字符串反序列化并一一映射为对象的属性,从而构成后端可直接使用的pojo对象
@RequestMapping(value = '/queryUser', method = RequestMethod.POST)
public void queryUser(@RequestBody User user)  // 3
	// user可直接使用
	System.out.print(user);

二. 使用@RequestParam(传递多个对象适用)

Controller控制层使用@RequestParam注解接收对象参数时:

  1. 在Axios中,先使用JSON.stringify()将需传递的对象转换为json格式的字符串,再使用this.$qs.stringify()转化为url传参形式的字符串
this.$axios(
    method: 'post',
    url: '/queryUser',
    data: this.$qs.stringify(  // 1
        user: JSON.stringify(this.user)
    )
).then((res) => 
    console.log(res.data)
);
  1. Controller使用@ResquestParam注解,形参并不直接写pojo对象,而是Map< String,Object>对象,然后使用其get(“key”)方法得到前端作为url参数传递过来的json格式的object对象,使用toString转化为字符串后,利用第三方架包fastjson的JSON.ParseObject()将字符串转成后端直接使用的pojo对象
@RequestMapping(value = 'queryUser', method = RequestMethod.POST)
public void queryUser(@RequestParam Map<String, Object> param)  // 2
// get("key")方法得到前端作为url参数传递过来的json格式的object对象
Object o = param.get("user");
// toString转成字符串
String userStr = o.toString();
// 三方架包fastjson转pojo对象
User user = JSON.parseObject(userStr, User.class);
// 对象使用
System.out.print(user);

JSON.parseObject()的依赖

<dependency>
  <groupId>com.alibaba</groupId>
  <artifactId>fastjson</artifactId>
  <version>2.0.1</version>
</dependency>

若用此方法在Axios传递对象时,仅仅 this.$qs.stringify(user: this.user),则会将user的每一个属性拆解拼接为url传参形式的串(user.id=1&user.name=小明),后端就获取不到完整对象了

三. 无注解(传递单个对象适用)

  1. 无需设置响应头
  2. axios使用this.$qs.stringify()
this.$axios(
    method: 'post',
    url: '/queryUser',
    data: this.$qs.stringify(user)
).then((res) => 
    console.log(res.data)
);
  1. Controller形参处无需注解
@RequestMapping(value = '/queryUser', method = RequestMethod.POST)
public void queryUser(User user) 
	// user可直接使用
	System.out.print(user);

总结

单个pojo对象可使用第一种和第三种方法,多个不同的pojo对象则可使用第二种方法

文章参考博主简述 @insaneh

以上是关于Axios使用Post向Spring传递POJO对象的三种方法(@RequestBody与@RequestParam注解)的主要内容,如果未能解决你的问题,请参考以下文章

Axios使用Post向Spring传递POJO对象的三种方法(@RequestBody与@RequestParam注解)

Axios使用Post向Spring传递POJO对象的三种方法(@RequestBody与@RequestParam注解)

使用axios请求数据,post请求出错。因为axios传递的请求参数是json格式,而后端接口要求是formData

使用 axios POST 请求传递标头

axios 使用post方式传递参数,后端接受不到问题

无法使用 axios 向 Flask 应用程序发送 POST 请求