前端传输多个不同对象至后端，如何接收参数

熬夜伤发君

已于 2024-04-08 17:52:09 修改

阅读量247

点赞数 2

文章标签： spring boot java vue

于 2024-04-08 17:49:43 首次发布

本文链接：https://blog.csdn.net/Aspiring_boy/article/details/137517263

版权

前端传输多个不同对象至后端

方式一、使用form-urlencoded格式：

需要将对象转换为urlencoded格式，例如使用qs库或其他方式：
前端代码如下：Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'

	
	  let data = qs.stringify({
          newBaseMap: JSON.stringify(this.form),
          oldBaseMap: JSON.stringify(this.oldForm)
        })
      
      request({
        url: '/test/modelEdit',
        method: 'post',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        data: data
      }).then((response) => {
        console.log("response",response)
      })

在后端，首先将接收到的字符串参数反序列化为JSON对象，然后转化为BaseMap对象

	@PostMapping("/test/modelEdit")
	public AjaxResult modelEdit(
	    @RequestParam("newBaseMap") String newBaseMapJson,
	    @RequestParam("oldBaseMap") String oldBaseMapJson
	) {
	    ObjectMapper mapper = new ObjectMapper();
	    BaseMap newBasMap = mapper.readValue(newBaseMapJson, BaseMap.class);
	    BaseMap oldBasMap = mapper.readValue(oldBaseMapJson, BaseMap.class);
		/* ObjectMapper是Jackson库中的核心类，它负责Java对象与JSON之间的序列化和反序列化
		工作。这里的readValue方法是用来进行反序列化的，即将JSON字符串转换成对应的Java对象*/
		
	    // ...处理逻辑...
	}

方式二、切换为JSON格式

前端代码如下： 'Content-Type': 'application/json;charset=utf-8'

	let data = {
	  newBasMap: JSON.stringify(this.form),
	  oldBasMap: JSON.stringify(this.oldForm)
	};
	
	request({
	  url: '/test/modelEdit',
	  method: 'post',
	  headers: {
	    'Content-Type': 'application/json;charset=utf-8'
	  },
	  data: data
	}).then((response) => {
	  console.log("response", response);
	});

后端接收并解析JSON对象:

@PostMapping("/test/modelEdit")
public AjaxResult modelEdit(@RequestBody Map<String, String> jsonPayload) {
    ObjectMapper objectMapper = new ObjectMapper();

    try {
        String newBaseMapJson = jsonPayload.get("newBaseMap");
        BasMap newBaseMap = objectMapper.readValue(newBasMapeJson, BasMap.class);

        String oldBaseMapJson = jsonPayload.get("oldBaseMap");
        BasMap oldBaseMap = objectMapper.readValue(oldBaseMapJson, BasMap.class);

        // ...处理逻辑...

    } catch (JsonProcessingException e) {
        // 错误处理...
    }
    
    // 返回结果...
}