在 JavaScript 中访问 Spring MVC 模型对象

1. 概述

本文将介绍如何在使用 Thymeleaf 模板引擎的 Spring MVC 应用中，从包含 JavaScript 代码的视图中访问模型对象。虽然示例基于 Spring Boot 和 Thymeleaf，但核心思路同样适用于其他模板引擎。

我们将讨论两种常见场景：

JavaScript 代码内嵌在由模板引擎生成的页面中（内部 JS）
JavaScript 代码位于外部文件中（外部 JS），例如 script.js

2. 环境准备

假设你已经搭建好了一个使用 Thymeleaf 的 Spring Boot Web 应用。如果你还没开始，可以参考以下教程快速上手：

Bootstrap a Simple Application – 如何从零开始创建 Spring Boot 应用
Spring MVC + Thymeleaf 3.0: New Features – Thymeleaf 语法使用指南

此外，假设你的应用中有一个 Controller 对应接口 /index，它会渲染一个名为 index.html 的模板。这个模板可能包含内嵌的或外部的 JavaScript 代码，比如 script.js。

我们的目标是：无论 JS 是内嵌还是外置，都能顺利访问到 Spring MVC 中的模型参数。

3. 准备模型参数

首先，我们需要在 Controller 中准备好要在 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");
}

更多关于 Model、ModelMap 和 ModelAndView 的使用方式，可以查看这篇文章：Model, ModelMap, and ModelView in Spring MVC

4. 内嵌 JS 代码访问模型参数

内嵌 JS 代码是指直接写在 index.html 页面中的 <script> 标签内的 JS 代码。这种方式访问模型参数非常简单粗暴：

<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>

Thymeleaf 在渲染时会将 [[${}]] 表达式替换成实际的值。因此，最终生成的 HTML 将是：

<script>
    var number = 1234;
    var message = "Hello from Spring MVC!";
</script>

✅ 优点：简单直接，无需额外处理
❌ 缺点：JS 代码混在 HTML 中，维护性略差

5. 外部 JS 文件访问模型参数

如果 JS 代码写在外部文件中，比如 script.js，通过如下方式引入：

<script src="/js/script.js"></script>

此时，我们无法直接在 script.js 中使用 Thymeleaf 表达式。要实现访问模型参数，可以这样做：

5.1. 步骤说明

在页面中通过内嵌 JS 定义变量，赋值为模型参数
在外部 JS 文件中访问这些变量

⚠️ 注意：外部 JS 必须在内嵌 JS 之后执行，否则变量未定义。

5.2. 控制执行顺序

最简单的方法是将外部 JS 的 <script> 标签放在内嵌 JS 之后：

<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>
<script src="/js/script.js"></script>

这样就能确保变量先定义，再使用。

5.3. 使用异步加载方式

如果不想严格控制顺序，可以使用异步加载方式，在页面加载完成后再执行 JS 逻辑。

原生方式：

window.onload = function() {
    // 使用 number 和 message
};

6. 原理解释

Spring MVC 中，Thymeleaf 模板引擎只处理模板文件（如 index.html），将其渲染为最终的 HTML。而外部 JS 文件（如 script.js）是由浏览器加载和执行的，Thymeleaf 并不会处理它们。

因此，我们只能在模板文件中通过内嵌 JS 注入模型变量，再由外部 JS 引用这些变量。

7. 总结

本文介绍了如何在 JavaScript 中访问 Spring MVC 的模型对象，分别讲解了内嵌和外部 JS 的处理方式。

虽然方法简单，但在实际项目中经常踩坑，特别是在 JS 加载顺序上，务必注意变量定义和使用时机。

完整示例代码可以在这里找到：GitHub 仓库

Persistence

REST

Security