thymeleaf 将变量传递给 javascript (1)

📌 相关文章

📜 thymeleaf 将变量传递给 javascript (1)

📅 最后修改于: 2023-12-03 14:47:58.528000 🧑 作者: Mango

Thymeleaf 将变量传递给 JavaScript

在 Web 应用程序中，我们经常需要将后端数据传递给前端 JavaScript。Thymeleaf 提供了多种方式来实现这一目的。下面将介绍两种常用的方式：将 Thymeleaf 变量传递给 JavaScript 变量和将 Thymeleaf 变量传递给 JavaScript 函数。

1. 将 Thymeleaf 变量传递给 JavaScript 变量

1.1 在页面中定义变量

将 Thymeleaf 变量传递给 JavaScript 变量的最简单的方法是在 HTML 页面中定义变量。在 Thymeleaf 中，可以通过 th:text 属性将后端变量的值赋值给 HTML 标签的文本值。通过这种方式，我们可以将变量的值传递给 JavaScript 变量。

<!DOCTYPE html>
<html>
   <head>
      <title>Thymeleaf Demo</title>
      <script th:inline="javascript">
         /* 将 Thymeleaf 变量 msg 的值赋值给 JavaScript 变量 message */
         var message = /*[[${msg}]]*/ '';
      </script>
   </head>
   <body>
      <h1 th:text="${msg}">Hello World!</h1>
      <script>
         /* 使用 JavaScript 变量 message */
         console.log(message);
      </script>
   </body>
</html>

在这个例子中，我们先在 head 中定义了一个 JavaScript 变量 message，把 Thymeleaf 变量 msg 的值赋值给了它。然后在 body 中打印出了这个变量的值。

1.2 在 JavaScript 中定义变量

除了在 HTML 中定义变量外，还可以在 JavaScript 中定义变量，并将 Thymeleaf 变量的值赋值给它。

<!DOCTYPE html>
<html>
   <head>
      <title>Thymeleaf Demo</title>
      <script th:inline="javascript">
         /* 在 JavaScript 中定义变量 message，并将 Thymeleaf 变量 msg 的值赋值给它 */
         var message = /*[[${msg}]]*/ '';
         console.log(message);
      </script>
   </head>
   <body>
      <h1 th:text="${msg}">Hello World!</h1>
   </body>
</html>

在这个例子中，我们在 JavaScript 中定义了变量 message，并将 Thymeleaf 变量 msg 的值赋值给它。

2. 将 Thymeleaf 变量传递给 JavaScript 函数

有时候我们需要将 Thymeleaf 变量传递给 JavaScript 中的函数。这时候可以使用 th:onclick 属性来实现。

<!DOCTYPE html>
<html>
   <head>
      <title>Thymeleaf Demo</title>
      <script>
         /* 定义一个 JavaScript 函数，接受一个参数 */
         function showMessage(message) {
            alert(message);
         }
      </script>
   </head>
   <body>
      <h1 th:text="${msg}">Hello World!</h1>
      <!-- 当按钮被点击时，调用 showMessage 函数，并将 Thymeleaf 变量 msg 的值作为参数传递给它 -->
      <button th:onclick="'showMessage(' + /*[[${msg}]]*/ '' + ')'" >Click Me</button>
   </body>
</html>

在这个例子中，我们定义了一个 JavaScript 函数 showMessage，使用 th:onclick 属性将 Thymeleaf 变量 msg 的值作为参数传递给这个函数。当按钮被点击时，就会弹出一个对话框，显示变量的值。

总结

Thymeleaf 提供了多种将后端变量传递给前端 JavaScript 的方法。我们可以在 HTML 中定义变量，也可以在 JavaScript 中定义变量，并将后端变量的值赋值给它们。另外，我们还可以使用 th:onclick 属性来将变量传递给 JavaScript 中的函数。无论哪种方法都非常简单，方便易用。