Javascript如何获取Thymeleaf表达式的内容

博主大二下的暑假在一个老师的工作室实习，参与到了一个电商项目的开发中去，博主负责web端的前端工作，该web前端用了Thymeleaf渲染数据，JQuery进行数据处理，说白了前端挺简陋，但是还是勉强算是一个项目。

---

在做项目的过程中，我遇到了诸多问题，其中有一个问题就是在本篇博客阐述的。

当后端进行请求的跳转时，页面在进行初始化时会用Thymeleaf进行数据的渲染，但是也就仅在页面初始化时进行页面渲染，当用Javascript或者JQuery对页面进行操作时，数据改动过后Thymeleaf渲染了的数据可能就无法再次拿到。

即如果想用Javascript或者JQuery将Thymeleaf渲染的数据保存下来以便接下来的使用，该怎么办？

博主首先想到的办法是，使用一个隐藏的DOM元素将渲染的数据填充并用JQuery拿到。

<input id=”messageInput” th:value=”${message}” hidden>

var message = $(“input#messageInput”).val();

这个方法虽然可行，但如果传过来的数据量大或者数据量多，岂不是要在页面上写很多隐藏的DOM元素。

---

博主在上网查阅资料后，发现Javascript确实可以获取到Thymeleaf传过来的数据，具体写法:

<script th:inline="javascript">
    var msg = [[${message}]];
</script>

即只需要在script上添加th:inline=”javascript”的属性即可。

可是，目前博主查阅的资料的说法是，这种写法不能写在外联式的Javascript文件里，这样会不起作用，必须写在被渲染的html文件中。这是由于 Thymeleaf 是一种（SSR）服务端渲染，它只会对指定 html 页面进行渲染，其 html 关联的 script 脚本不在其渲染范围内。如若获取到数据后还想对其进行操作，可以将后续的操作写在外联式Javascript文件中，获取数据就写在html的script标签中。

如：

html

<script th:inline="javascript">
    var msg = [[${message}]];
</script>
<script src=”message.js”></script>

message.js

alert(msg);

 

这种方式不仅可以获取字符串，还可以获取到传过来的JSON对象。

<script th:inline="javascript">
    var paths = [[${storeDTO.getPaths()}]];
</script>

浏览器控制台打印一下这个传过来的对象

接下来就可以在外联式的Javascript文件对该JSON进行操作了。

 

以上，是关于Javascript如何获取Thymeleaf表达式的内容的方法粗略介绍。