1. 概述
在本教程中,我们将展示如何在包含JavaScript代码的Thymeleaf视图中访问Spring MVC对象。我们将在示例中使用Spring Boot和Thymeleaf模板引擎,但这个想法也适用于其他模板引擎。
我们将描述两种情况:当JavaScript代码嵌入或在引擎生成的网页内部时,以及当它在页面外部时,例如,在单独的JavaScript文件中。
2. 设置
假设我们已经配置了一个使用Thymeleaf模板引擎的Spring Boot Web应用程序。否则,你可能会发现这些教程很有用:
- 引导一个简单的应用程序:关于如何从头开始创建一个Spring Boot应用程序
- Spring MVC + Thymeleaf 3.0:新特性:关于如何使用Thymeleaf语法
此外,假设我们的应用程序有一个对应于端点/index的控制器,它从名为index.html的模板呈现视图。该模板可能包含嵌入式或外部JavaScript代码,例如script.js。
我们的目标是能够从嵌入式或外部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. 嵌入JS代码
嵌入式JS代码只不过是位于<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代码 使用相同的<script>标签包含在index.html文件中,我们在其中指定了src属性:
<script src="/js/script.js"></script>
现在,如果我们想使用script.js中的Spring MVC参数,我们应该:
- 像我们在上一节中所做的那样在嵌入式JS代码中定义JS变量
- 从script.js文件访问这些变量
注意外部JS代码应该在嵌入JS代码的变量初始化之后调用。
这可以通过两种方式实现:通过指定JS代码执行的顺序或使用异步JS代码执行。
5.1 指定执行顺序
我们可以通过在index.html中的嵌入代码之后声明外部JS代码来做到这一点:
<script>
var number = [[${number}]];
var message = "[[${message}]]";
</script>
<script src="/js/script.js"></script>
5.2 异步代码执行
在这种情况下,我们在index.html中声明外部和嵌入式JS代码的顺序并不重要,但我们应该将script.js中的代码放入典型的页面加载包装器中:
window.onload = function() {
// JS code
};
尽管这段代码很简单,但最常见的做法是改用jQuery,我们将这个库作为第一个<script>元素包含在index.html文件中:
<!DOCTYPE html>
<html>
<head>
<script src="/js/jquery.js"></script>
...
</head>
...
</html>
现在,我们可以将JS代码放在以下jQuery包装器中:
$(function () {
// JS code
});
使用这个包装器,我们可以保证仅在整个页面内容以及所有其他嵌入的JS代码完全加载时才执行JS代码。
6. 一点解释
在Spring MVC中,Thymeleaf模板引擎仅解析模板文件(在我们的示例中为index.html)并将其转换为HTML文件。该文件本身可能包含对模板引擎范围之外的其他资源的引用。解析这些资源并呈现HTML视图的是用户的浏览器。
因此,这些资源不会被模板引擎解析,我们可以将控制器中定义的变量注入到嵌入式JS代码中,然后这些代码可用于外部JS代码。
7. 总结
在本教程中,我们学习了如何在JavaScript代码中访问Spring MVC参数。
与往常一样,本教程的完整源代码可在GitHub上获得。