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

熬夜伤发君

已于 2024-10-30 15:51:50 修改

阅读量918

点赞数 2

文章标签： spring boot java vue

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

本文链接：https://blog.youkuaiyun.com/Aspiring_boy/article/details/137517263

版权

本文介绍了如何在前端使用form-urlencoded和JSON格式分别将多个对象（如BaseMap）发送到后端，以及后端如何解析这两种格式的请求。着重讲解了序列化和反序列化的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

方式一、使用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);
	});

后端使用Map接收后使用ObjectMapper解析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) {
        // 错误处理...
    }
    
    // 返回结果...
}

后端使用JSONObject接收并解析JSON对象，映射到自定义对象仍需要ObjectMapper：

    @PostMapping("/test/modelEdit")
    public AjaxResult modelEdit(@RequestBody JSONObject jsonObject) {
        try {
            String newBaseMapJson = jsonObject.getString("newBaseMap"); 
            BasMap newBaseMap = new ObjectMapper().readValue(newBaseMapJson, BasMap.class);

            String oldBaseMapJson = jsonObject.getString("oldBaseMap");
            BasMap oldBaseMap = new ObjectMapper().readValue(oldBaseMapJson, BasMap.class);

			Boolean bool = jsonObject.getBoolean("bool"); //转换为Boolean
            List<Integer> dataList = jsonObject.getList("dataList",Integer.class); //转换为List<Integer>
			
            // ...处理逻辑...

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