Thymeleaf 中JavaScript 如何获取后台传入的值

Java 2017-10-09

2017-10-09

例如用js获取指定ID隐藏域的值：

<input type="hidden" th:value="${session.user.name}" id="username"/>

<script type="text/javascript">
    function test(){
      var user = document.getElementById("username").value;
      alert(user);
    }
</script>

Thymeleaf提供了一系列的“脚本”的内联功能,这样你就可以将你的数据传入到你自己的脚本中。

注意：只有加入了th:inline=”javascript”属性的js代码中，才能能使用[[…]]

<script th:inline="javascript">
    function test(){
      var user = [[${user.username}]];
      alert(user);
    }
</script>

[[…]]之间的表达式在Thymeleaf中被认为是内联表达式,在其中你可以使用任何类型的表达式,也会产生有效的th:text属性。

例如下面的代码：

Hello, [[${session.user.name}]]!

等同于：

Hello, <span th:text="${session.user.name}">I`m user</span>!

为了让内联表达式能正确工作,我们必须使用th:inline 属性来激活它,它有三个可选的模式(text, javascript 和 none )。

<p th:inline="text">Hello, [[${session.user.name}]]!</p>

如果不使用th:inline="text",则会直接被当做字符串来显示。th:inline="javascript"表示能在js中使用[[…]]的值,

而th:inline="none"表示不进行任何处理直接显示。

最后,标签的th:inline属性不一定需要在本级标签内，任何父标签都行，例如下面的代码也是可以的：

<body th:inline="text">

   ...

   <p>Hello, [[${session.user.name}]]!</p>

   ...