thymeleaf取model值_thymeleaf在js中取后台放在model中值的各种方式及区别

内联脚本(JavaScript inlining)

内联脚本为HTML模板模式下的的JavaScript的

和 内联文本 一样

这个模式需要使用th:inline="javascript"显式开启，即必须在

1

2 ...3

4 ...5

1、双中括号 [[ ]] 输出所需文本，结果会使用引号将其括起来并且对其文本内容中进行JS转义

1

2 ...3 var username =[[${session.user.name}]];4 ...5

输出结果：

1

2 ...3 var username = "诸葛\"孔明\"";4 ...5

首先， 内联脚本不仅会输出所需文本，还会使用引号将其括起来并且对其内容进行JS转义，因此表达式的结果将会被输出为 格式正确的JS文本

例：用户在输入框中输入  >  今天真是一个"好"天气，这样存入数据库，再取出来放在js中时，因为会转义成一整句字符串："今天真是一个\"好\"天气"

2、中括号小括号 [( )] 输出所需文本，不会转义字符串中的内容，也不会在字符串两头加上引号

...

输出结果：

...

两端没了引号，js会报错，这种可直接使用后台传过来的转成json字符串后的对象或数组等，当然这只是举个例子，如果想使用数组或对象，后面有更好的方法

3、用多行注释 /* */ 输出文本，Thymeleaf会忽视一切注释之后和分号之前的内容，即可以看成用注释中的内容替换了后面的内容 (个人最推荐写法)

1

2 ...3 var username = /*[[${session.user.name}]]*/ "用户的名称";4 ...5

输出结果：

1

2 ...3 var username = "诸葛孔明";4 ...5

这里thymeleaf解析时，直接用注释里的内容把从注释到此句结束，即分号之前的所有内容替换成要取出的文本内容

个人比较推荐这种写法，因为这样，html即可以做为静态文件打开，也可以解析后由后台插入数据

例如：前端写出的页面里跳转为：

url: "./user_edit.html";

而我们替换成我们后台获取页面的绝对路径，这样写 当你静态的打开模板文件时(不通过服务器执行)它也会完美运行, 即不影响直接用浏览器打开页面跳转，也不影响后台thymeleaf解析使用

url: /*[[@{/userEdit/getPage}]]*/"./user_edit.html" ;

高级内联计算和JavaScript序列化

表达式的计算是智能且不局限于字符串的。Thymeleaf会将下列类型的对象用JavaScript语法正确输出：

Strings

Numbers

Booleans

Arrays

Collections

Maps

Beans (必须有getter和setter方法)

1

2 ...3 var user = /*[[${session.user}]]*/ null;4 ...5

${session.user}确定为一个User对象，那么Thymeleaf会正确的将其转化为Javascript语法，输出结果：

1

2 ...3 var user = {"age":null,"firstName":"John","lastName":"Apricot",4 "name":"John Apricot","nationality":"Antarctica"};5 ...6

JavaScript的序列化是通过实现org.thymeleaf.standard.serializer.IStandardJavaScriptSerializer接口完成，可以在模板引擎使用的StandardDialect实例中配置。

JS序列化的默认实现是在classpath下寻找Jackson库，如果该库存在，则调用其方法实现。如果不存在，则会调用内置的序列化方法。这个方法覆盖了绝大多数场景的需求，并且提供相似的结果(但是灵活性较差)。