Thymeleaf th:onclick传递复杂对象为空，是否仅支持简单类型参数？

核心结论 #

• 你遇到的现象是Thymeleaf的正常行为，并非th:onclick不支持传递复杂对象，问题根因是复杂对象的序列化方式错误。
• 简单类型（字符串、数字等）可以正常传递读取，是因为Thymeleaf渲染时会直接输出对应值；而直接写${employee}时，Thymeleaf默认调用该对象的toString()方法，如果你没有重写该方法输出JSON格式字符串，最终渲染到HTML里的是类似com.xxx.Employee@123456的类名+哈希值字符串，JS自然无法读取到对象属性。

解决方案 #

方案1：序列化对象为JSON传递（推荐） #

SpringBoot项目默认集成Jackson序列化工具，Thymeleaf可直接调用内置的#objectMapper工具将对象转为JSON字符串，JS侧再反序列化即可拿到完整对象。
修改后的模板代码如下：

<td>
  <button 
    th:data-parameter1="${#objectMapper.writeValueAsString(employee)}" 
    th:onclick="afficherDetails(JSON.parse(this.getAttribute('data-parameter1')))"
  >
    details
  </button>
</td>

原JS的afficherDetails函数无需修改，即可正常读取employee的各个属性。

注：如果使用非SpringBoot项目或低版本Thymeleaf没有内置#objectMapper，可以自行封装JSON序列化工具类，在Thymeleaf中调用自定义工具类完成对象转JSON即可。

方案2：逐字段传递 #

如果需要用到的属性较少，也可以直接把需要的字段逐个作为参数传递：

<td>
  <button 
    th:onclick="afficherDetails(
      [[${employee.firstName}]],
      [[${employee.lastName}]],
      [[${employee.address}]],
      [[${employee.title}]],
      [[${employee.manager}]]
    )"
  >
    details
  </button>
</td>

对应修改JS函数接收对应参数即可：

function afficherDetails(firstName, lastName, address, title, manager) {
  document.getElementById("detailledFirstNameDataLabelId").textContent = firstName;
  document.getElementById("detailledLastNameDataLabelId").textContent = lastName;
  document.getElementById("detailledAddressDataLabelId").textContent = address;
  document.getElementById("detailledTitleDataLabelId").textContent = title;
  document.getElementById("detailledManagerDataLabelId").textContent = manager;
}

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