Thymeleaf模版中的th:field标签

发表于

概述

最近项目上遇到给一个select标签设置name之后，却通过form提交始终拿不到值，查了好久资料后，发现是对th:field了解的不够。

th:field标签

  1. th:field属性常用于表单字段绑定，除了自动生成id和name属性，对不同的节点类型还会有不同的生成逻辑。
    例如input还会再生成value属性，textarea会自动设文本，select会自动选中相应的选项，如果是同个表单属性，radio和checkbox的id会全局自动增长。

  2. th:field属性需要使用星号表达式*{…}，即先使用th:object声明表单对象，再使用th:field=*{…}对表单域进行处理。

  3. 使用th:field属性时，如果html节点中已经存在id属性，则不会再另外生成。如果存在name属性，还是会覆盖。

    在项目上遇到的这个问题，就是name定义的key和th:field的大括号中的key不一样，导致表单提交的key使用了th:field中的key，如果后台用的name的key，会导致拿不到值。

    1
    2
    3
    <form class="form-horizontal" id="form-user-edit" th:object="${user}">
    	<input name="userValue"  type="hidden" id="userValueId"  th:field="*{userId}" />
    </form>

    如上代码块，通过iduserValueId是可以拿到值的。而通过$(‘#form-user-edit’).serialize()，生成的数据，键值对的key是userId,而不是userValue

总结

Thymeleaf确实是一个好的模版语言，在用的时候最好先熟悉其中的语法。