怎么在JSP中将Java变量值传递给JavaScript变量

在JSP页面中将Java变量的值传递给JavaScript变量，最直接的核心做法是在服务端生成页面文本时，通过EL表达式或JSP表达式将Java变量的值输出到客户端脚本的变量初始化语句中，或者写入HTML标签的data-*自定义属性中供JavaScript读取。解决这个问题的核心在于看清两者的时序差异：Java代码运行在服务端，而JavaScript运行在客户端浏览器，所谓“传值”，本质是服务端在组装HTML文本时将变量具体值打印进脚本或DOM节点中。

理解执行时序：服务端渲染与客户端解析

很多初学者在混合编写JSP与JavaScript时，容易把两者的执行环境混为一谈，甚至误以为可以在JavaScript函数中动态调用Java变量。实际上，JSP文件在被用户访问时，首先由Web容器（如Tomcat）在服务端执行。容器会依次运行Java小脚本、计算EL表达式，并将最终的计算结果拼接成纯文本形式的HTML和JavaScript代码，然后通过网络将这份文本发送给浏览器。

当浏览器接收到响应报文后，服务端的Java生命周期早已彻底结束。此时浏览器的HTML解析引擎和JavaScript引擎开始工作，遇到<script>标签时执行脚本。这意味着，JavaScript所读取到的并非Java运行时的活体内存对象，而是服务端在渲染阶段印在页面文本中的静态字面量。

传递变量的标准操作步骤

在日常实际开发中，将服务端数据安全顺畅地传递到前端通常分为以下四个清晰步骤：

步骤一：在服务端将变量存入作用域

无论是在Servlet控制器中还是在JSP的脚本段中，首先要确保变量存放在能够被JSP访问到的作用域（如request、session或application）中。推荐在Servlet中完成这一操作，保持业务逻辑与页面展示解耦：

// 在 Servlet 或 Spring Controller 中
int userId = 1024;
String userName = "张三";
boolean isVip = true;

request.setAttribute("userId", userId);
request.setAttribute("userName", userName);
request.setAttribute("isVip", isVip);

// 转发到对应的 JSP 页面
request.getRequestDispatcher("/userProfile.jsp").forward(request, response);

步骤二：依据数据类型决定赋值语法

确定变量类型是数值、布尔值还是字符串。数值和布尔值可以直接输出，而字符串值在赋值给JavaScript变量时，必须在JSP外部显式包裹半角单引号或双引号，以保证生成的JavaScript语法合法。

步骤三：在JSP的Script标签中引用表达式

使用EL表达式（${...}）或JSP输出表达式（<%= ... %>）将变量注入到脚本中：

<script>
    // 1. 数值类型：直接注入
    let currentUserId = ${userId};

    // 2. 布尔类型：直接注入
    let isVipUser = ${isVip};

    // 3. 字符串类型：必须包裹引号
    let currentUserName = "${userName}";

    // 测试输出
    console.log("ID:", currentUserId);
    console.log("用户名:", currentUserName);
    console.log("是否VIP:", isVipUser);
</script>

步骤四：在浏览器中核实生成的源代码

在浏览器中右键选择“查看网页源代码”。在查看源码时，你看到的不应再有${...}或<%= %>等服务端标签，而应该呈现为干净的纯文本：

<script>
    let currentUserId = 1024;
    let isVipUser = true;
    let currentUserName = "张三";
</script>

如果源码中直接出现了未替换的${userId}，说明当前JSP页面禁用了EL表达式，需要在页面顶部添加指令：<%@ page isELIgnored="false" %>。

不同数据类型的传递方式与细节

不同类型的Java变量在传递给前端时，处理方式差异很大。如果处理不当，极易出现语法中断甚至安全漏洞。

1. 数值与布尔类型

Java中的数值（int, double, long）以及布尔值（boolean）在JavaScript语法中具有直接对应的字面量表达。传递时直接书写EL表达式即可，不需要添加双引号：

let score = ${student.score};    // 渲染结果: let score = 98.5;
let isActive = ${user.active};  // 渲染结果: let isActive = true;

2. 字符串类型及特殊字符转义

字符串在JavaScript中必须作为字符字面量存在，因此外部必须加引号：

let address = "${user.address}"; // 渲染结果: let address = "北京市海淀区";

如果字符串内容中本身含有双引号、换行符（\r\n）或者斜杠，简单的字符串拼接就会破坏JS的语句闭合，造成脚本报错或XSS（跨站脚本攻击）。例如，当Java变量值为 Tom" || alert(1); // 时，生成的语句就变成了：

let name = "Tom" || alert(1); //"; // 发生脚本注入或语法错误

针对这种情况，推荐在传递富文本或不确定字符时，使用带有安全转义功能的标签库，例如JSTL的 <c:out>，或者在后端使用工具类对字符进行JavaScript规范转义（如Apache Commons Text的 StringEscapeUtils.escapeEcmaScript()）。

3. 复杂集合与JavaBean对象

如果需要向JavaScript传递List、Map或JavaBean自定义对象，切忌在JSP中通过Java小脚本去循环拼装字符串。最正规、最通用的做法是在后端控制器中将Java对象序列化为标准JSON字符串：

// 后端：使用 Jackson 或 Gson 将 List 转换为 JSON 字符串
List<Product> productList = productService.findAll();
String productsJson = new ObjectMapper().writeValueAsString(productList);
request.setAttribute("productsJson", productsJson);

在JSP中将该JSON文本直接作为JavaScript的对象字面量或通过 JSON.parse() 解析：

<script>
    // 将生成的合法JSON字符串赋给JS对象
    let products = ${productsJson};
    console.log("第一个商品名称:", products[0].name);
</script>

更稳健的安全方案：借助 DOM 数据属性解耦

虽然直接在 <script> 标签中书写 let val = "${var}"; 很直观，但在大型项目或严格的代码规范审查中，这种“脚本内插表达式”的做法往往被视作反模式。主要原因有两点：首先它混合了视图层模板与客户端脚本，破坏了代码提示与静态检查；其次，如果输出的内容来自用户输入，未经处理的内容直接嵌入脚本上下文，很容易导致严重的跨站脚本攻击（XSS）。

行业推荐的解耦方案是：将Java变量作为HTML标签的 data-* 自定义属性输出到DOM中，然后由独立的JavaScript脚本通过 dataset 接口读取。

实现步骤示例

1. 在HTML元素（如容器div、隐藏表单域或按钮）上通过EL表达式输出数据属性：

<!-- 将 Java 变量安全渲染在 DOM 节点的 data 属性上 -->
<div id="userProfile"
     data-user-id="${user.id}"
     data-user-name="${fn:escapeXml(user.name)}"
     data-role="${user.role}">
</div>

2. 在外部引用的或页面底部的JavaScript中，通过标准的DOM API读取这些变量：

// 获取 DOM 元素
const profileElem = document.getElementById("userProfile");

// 通过 dataset 属性读取传递过来的值
const userId = parseInt(profileElem.dataset.userId, 10);
const userName = profileElem.dataset.userName;
const userRole = profileElem.dataset.role;

console.log("成功读取用户属性:", { userId, userName, userRole });

这种做法的最大优点是：HTML属性天然自带字符实体转义支持（可以使用JSTL的 fn:escapeXml 处理），有效避免了JavaScript语法被恶意字符串打断的隐患，同时也实现了JavaScript代码与JSP模板的彻底解耦，JS代码可以完全移入独立的 .js 静态文件中。

常见问题与排查指南