1. 概述
在本教程中，我們將演示如何在包含 JavaScript 代碼的 Thymeleaf 視圖中訪問 Spring MVC 對象的方法。 我們將在示例中使用 Spring Boot 和 Thymeleaf 模板引擎，但該概念也適用於其他模板引擎。
我們將描述兩種情況：當 JavaScript 代碼嵌入到或與由引擎生成的網頁內部時，以及當它與網頁外部分離，例如在單獨的 JavaScript 文件中。
2. 部署準備
假設我們已經配置好一個使用 Thymeleaf 模板引擎的 Spring Boot Web 應用程序。如果您需要從頭開始創建 Spring Boot 應用程序，可以參考以下教程：
- Bootstrap a Simple Application – 介紹如何從頭開始創建 Spring Boot 應用程序
- Spring MVC + Thymeleaf 3.0: New Features – 介紹 Thymeleaf 語法的用法
此外，假設我們的應用程序有一個與 index</em/> 終點對應的控制器，該控制器從名為 index.html</em/> 的模板渲染視圖。該模板可能包含嵌入式或外部 JavaScript 代碼，例如 script.js</em/>。
我們的目標是能夠從嵌入式或外部 JavaScript (JS) 代碼中訪問 Spring MVC 參數。
3. 訪問參數
首先，我們需要創建從 JS 代碼中使用的模型變量。
在 Spring MVC 中，有多種實現方式。我們使用 ModelAndView 方式：
@RequestMapping("/index")
public ModelAndView thymeleafView(Map<String, Object> model) {
model.put("number", 1234);
model.put("message", "Hello from Spring MVC");
return new ModelAndView("thymeleaf/index");
}
我們可以通過我們的教程中關於 Spring MVC 上的 Model、ModelMap 和 ModelView 的內容來找到其他可能性。
4. 嵌入式 JavaScript 代碼
嵌入式 JavaScript 代碼是位於 <script> 元素內的 index.html 文件的一部分。我們可以相當直接地在其中傳遞 Spring MVC 變量：
<script>
var number = [[${number}]];
var message = "[[${message}]]";
</script>Thymeleaf 模板引擎會將每個表達式替換為當前執行作用域中可用的值。這意味着模板引擎會將上述代碼轉換成以下 HTML 代碼：
<script>
var number = 1234;
var message = "Hello from Spring MVC!";
</script>5. 外部 JS 代碼
假設我們的外部 JS 代碼通過在 <em style="font-style: italic;">index.html</em> 文件中使用 <em style="font-style: italic;">script</em> 標籤並指定 <em style="font-style: italic;">src</em> 屬性的方式包含在其中：
<script src="/js/script.js"></script>如果想要使用來自 script.js 的 Spring MVC 參數，我們應該：
- 在嵌入式 JS 代碼中定義 JS 變量，如前一節所述
- 從 script.js 文件中訪問這些變量
請注意，外部 JS 代碼應在嵌入式 JS 代碼變量初始化後調用。
可以通過指定 JS 代碼執行的順序或使用異步 JS 代碼執行來實現。
5.1. 指定執行順序
我們可以通過在 index.html 中聲明外部 JS 代碼在嵌入式 JS 代碼之後來實現這一點：
<script>
var number = [[${number}]];
var message = "[[${message}]]";
</script>
<script src="/js/script.js"></script>5.2. 異步代碼執行
在這種情況下，我們在 <em >index.html</em> 中聲明外部和嵌入式 JavaScript 代碼的順序均不重要，但我們應該將來自 <em >script.js</em> 的代碼放入典型的頁面加載時包裝器中：
window.onload = function() {
// JS code
};儘管這段代碼的實現相對簡單，但最常見的做法是使用 jQuery。 我們將該庫作為 index.html文件中第一個 script標籤包含進去：
<!DOCTYPE html>
<html>
<head>
<script src="/js/jquery.js"></script>
...
</head>
...
</html>現在，我們可以將 JS 代碼放在下面的 jQuery 包裝器中：
$(function () {
// JS code
});使用此包裝器，我們可以保證 JavaScript 代碼僅在整個頁面內容完全加載後執行，從而確保所有嵌入的 JavaScript 代碼也都已完全加載。
6. 一些解釋
在 Spring MVC 中，Thymeleaf 模板引擎僅解析模板文件（在本例中是 index.html）並將其轉換為 HTML 文件。 該文件本身可能包含指向超出模板引擎範圍的其他資源的引用。 用户的瀏覽器會解析這些資源並渲染 HTML 視圖。
因此，這些資源不會被模板引擎解析，我們只能將控制器中定義的變量注入到嵌入的 JavaScript 代碼中，然後該 JavaScript 代碼對外部 JavaScript 代碼可用。
7. 結論
在本教程中，我們學習瞭如何在 JavaScript 代碼中訪問 Spring MVC 參數。
