如何将JavaScript(JS) Map传递至Spring Boot控制器？

我来帮你搞定这个问题！你遇到的核心问题是：JavaScript的Map对象默认序列化后的格式和Spring Boot期望的键值对结构不匹配，导致后端没法直接用Map或HashMap接收。下面给你两种可行的解决方案，推荐第一种，简单又省心。

方案一：前端转成普通JS对象后发送 #

JavaScript的Map直接用JSON.stringify序列化后，会变成类似{"entries": [["1","value1"],["2","value2"]]}的结构，而Spring默认认的是{"1":"value1","2":"value2"}这种普通键值对对象。所以我们先把Map转成普通对象再发送：

前端代码示例 #

var myMap = new Map();
myMap.set('1', 'value1');
myMap.set('2', 'value2');

// 把Map转成普通JS对象（ES2019+支持，低版本可以用循环手动转）
const mapObj = Object.fromEntries(myMap);

// 用fetch发送请求（axios同理）
fetch('/api/receive-map', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 必须设置这个请求头
  },
  body: JSON.stringify(mapObj),
});

后端控制器代码 #

直接用@RequestBody Map<String, String>或者HashMap<String, String>接收就行，Spring会自动帮你绑定：

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.Map;

@RestController
public class MapReceiverController {

    @PostMapping("/api/receive-map")
    public String handleMap(@RequestBody Map<String, String> receivedMap) {
        // 现在可以正常使用receivedMap了
        System.out.println("Key 1 的值：" + receivedMap.get("1"));
        System.out.println("Key 2 的值：" + receivedMap.get("2"));
        return "Map接收成功！";
    }
}

方案二：后端自定义接收结构（无需修改前端） #

如果你不想改动前端代码，可以在后端定义一个包装类来接收JS Map序列化后的结构，再手动转成Map：

后端代码示例 #

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@RestController
public class DirectMapReceiverController {

    // 定义一个和JS Map序列化结构对应的包装类
    static class JsMapWrapper {
        private List<List<String>> entries;

        // 必须要有getter和setter，Spring才能反射赋值
        public List<List<String>> getEntries() {
            return entries;
        }

        public void setEntries(List<List<String>> entries) {
            this.entries = entries;
        }
    }

    @PostMapping("/api/receive-map-direct")
    public String handleDirectMap(@RequestBody JsMapWrapper mapWrapper) {
        Map<String, String> convertedMap = new HashMap<>();
        // 把entries转成普通Map
        for (List<String> entry : mapWrapper.getEntries()) {
            convertedMap.put(entry.get(0), entry.get(1));
        }
        // 使用转换后的Map
        System.out.println("Key 1 的值：" + convertedMap.get("1"));
        return "Map接收成功！";
    }
}

注意事项 #

• 一定要确保请求头包含Content-Type: application/json，否则Spring没法正确解析JSON格式的请求体。
• 如果你的Map值不是String类型（比如数字、对象），只需要把后端Map的泛型改成对应的类型就行，比如Map<String, Object>或者Map<String, Integer>。

内容的提问来源于stack exchange，提问作者Sumit