如何将JavaScript Map传递给Thymeleaf绑定的Java HashMap字段

当前代码传值失败是几个逻辑错误共同导致的：

• Thymeleaf是服务端渲染引擎，你写在onclick里的${object_temp.lizt}会在页面加载时就被替换成后端初始传过来的空Map的字符串值，和你前端JS里后续存储业务数据的map1完全没有关联，渲染完成后这个参数值就固定了，不会同步JS里的变量变化。
• 你写的dothis函数里argm=map1只是修改了函数内部的局部变量引用，既没有把数据写入表单，也没有发起网络请求把数据传给后端，后端根本不可能拿到这部分数据。
• 按钮的type设置为button，本身不会触发表单默认提交逻辑，就算你给表单写了th:action，点按钮也不会发POST请求到后端接口。
• JS原生Map类型和Java的HashMap序列化规则不兼容，默认表单提交的application/x-www-form-urlencoded格式无法直接承载Map结构数据，不做格式转换后端无法正确解析。
• Thymeleaf直接输出HashMap时调用的是对象的toString()方法，空Map输出的{}不是合法的JS对象语法，甚至可能直接触发前端脚本报错。

推荐两种可直接落地的实现方式，按需选择即可：

方式一：隐藏域+表单提交（无需额外引入AJAX逻辑） #

1. 先写工具函数把JS的Map转成可序列化的普通对象，因为JS原生Map无法直接被JSON.stringify正确序列化：

// Map转普通JS对象
function mapToObj(map) {
  const obj = {};
  map.forEach((val, key) => {
    obj[key] = val;
  });
  return obj;
}

2. 修改表单结构，新增对应HashMap字段的隐藏输入框，按钮点击时先把Map数据序列化后塞入隐藏域，再提交表单：

<form action="#" class="ui_formz" th:action="@{/SomeMethod}" th:object="${object_temp}" method="post">
  <!-- 隐藏域的name必须和Java对象里的HashMap属性名一致 -->
  <input type="hidden" name="lizt" id="liztHiddenInput">
  <button class="btn btn-primary" onclick="preSubmit()" type="submit">Buy</button>
</form>

3. 编写提交前的预处理JS逻辑：

var map1 = new Map();
// 这里写你自己的业务数据存储逻辑，比如 map1.set("goodsId","123")

function preSubmit() {
  const dataObj = mapToObj(map1);
  // 序列化后塞入隐藏域
  document.getElementById('liztHiddenInput').value = JSON.stringify(dataObj);
  // 函数执行完后表单会自动提交
}

4. 后端Controller接收参数时，把接收到的JSON字符串手动转成HashMap即可：

@PostMapping("/SomeMethod")
public String handleSubmit(@RequestParam String lizt) throws JsonProcessingException {
    ObjectMapper mapper = new ObjectMapper();
    HashMap<String, String> liztMap = mapper.readValue(lizt, new TypeReference<HashMap<String, String>>() {});
    ObjectTemp temp = new ObjectTemp(liztMap);
    // 后续业务逻辑
    return "resultPage";
}

方式二：AJAX提交（更灵活，适配复杂数据场景） #

1. 同样使用上面的mapToObj工具函数做格式转换，按钮点击时直接发异步请求提交JSON格式数据：

<button class="btn btn-primary" onclick="submitByAjax()" type="button">Buy</button>

function submitByAjax() {
  const dataObj = mapToObj(map1);
  fetch('/SomeMethod', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      lizt: dataObj
    })
  }).then(resp => resp.text())
  .then(path => {
    // 提交成功后的跳转逻辑
    window.location.href = path;
  });
}

2. 后端接口用@RequestBody直接接收Java对象，Spring会自动把JSON结构解析成对应的HashMap，无需手动转换：

@PostMapping("/SomeMethod")
public String handleSubmit(@RequestBody ObjectTemp objectTemp) {
    // 此处objectTemp里的lizt字段就是前端传过来的有数据的HashMap
    // 后续业务逻辑
    return "resultPage";
}

补充：原Java代码里new HashMap()是原始类型写法，建议改成new HashMap<>()避免不必要的类型转换警告。

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