怎么在JSP页面中嵌入JS代码并动态生成变量

作者：代码拾荒时间：2026-10-30 18:57:13浏览：623

详细讲解在JSP页面中嵌入JavaScript代码并动态生成变量的核心机制、常用语法、具体实操步骤以及避免语法错误与安全风险的关键注意事项。

在JSP中动态生成JavaScript变量的核心要领在于明确阶段划分：JSP是在服务端运行并产出纯文本字符流，而JavaScript则在客户端浏览器中被解析运行。服务端在生成HTML文本时，将Java对象的实际值打印在<script>标签内部的变量声明处，浏览器加载后便自然获得动态赋值。掌握JSP表达式、EL表达式以及JSON序列化三种实现手段，便能规范、安全地完成数据流转。

一、理解生命周期：服务端渲染与客户端执行的时序

许多初接触Java Web开发的读者常误以为JSP代码与JavaScript代码能够“实时相互调用”。实际上，两者不仅运行在不同的物理环境，在时间维度上也完全隔开。

当浏览器发起请求时，Web容器（如Tomcat）负责解析JSP。容器会将JSP转译为Java Servlet并编译执行。在这个阶段，所有嵌入的Java片段（如<%= %>或EL表达式${}）会被计算求值，并转换为对应的字符串写入HTTP响应报文。响应报文到达浏览器后，浏览器内核才开始解析HTML DOM树并调用JavaScript引擎。因此，所谓的“动态生成JS变量”，本质上是**在服务端把Java变量的值以合法的JavaScript字面量语法拼入输出文本中**。

图1：JSP服务端解析与浏览器客户端执行的时序模型

二、常用的三种动态生成变量方式

在具体的JSP代码中，开发者通常依据项目所采用的JSP规范版本与数据结构复杂度，选用以下三种语法形式之一：

1. 原生JSP表达式（`<%= %>`）

这是JSP最早期的语法标准。表达式中的Java语句执行后，其结果对象的toString()返回值将原封不动地输出到页面流中。

<script type="text/javascript">
    // 动态数值型变量：直接输出数字，无需双引号
    var serverPort = <%= request.getServerPort() %>;

    // 动态字符串变量：必须在JSP标签外包裹JavaScript的单引号或双引号
    var clientIp = "<%= request.getRemoteAddr() %>";
</script>

2. EL表达式（`${}`，推荐标准）

在现代JSP架构中，推荐使用EL（Expression Language）表达式替代脚本片段。EL表达式会自动在pageContext、request、session、application四个域对象中逐层检索属性，语法更为简短整洁。

<script type="text/javascript">
    // 获取作用域中的数字或布尔值
    const currentUserId = ${sessionScope.user.id};
    const isAdministrator = ${sessionScope.user.role == 'admin'};

    // 获取作用域中的文本内容
    const nickName = "${user.nickName}";
</script>

3. JSTL循环标签结合数组构建

如果后端传递的是一个List集合或数组，且没有引入JSON库，可以使用JSTL的<c:forEach>标签循环拼接JavaScript数组字面量：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<script type="text/javascript">
    const allowedTags = [
        <c:forEach items="${tagList}" var="tag" varStatus="loop">
            "${tag}"${loop.last ? '' : ','}
        </c:forEach>
    ];
</script>

图2：三种动态赋值机制的语法形式与适用场景

三、实操演练：从后端准备到前端渲染的四步流程

为了确保变量能够平稳传递并被正确解释，建议遵循清晰规范的四步开发路径：

第一步：后端Servlet准备数据。在控制器中处理业务，并将生成的Java对象或基本类型装入request作用域。
第二步：请求转发至目标JSP。使用request.getRequestDispatcher("page.jsp").forward(request, response);，保证数据在同一请求周期内有效。
第三步：在JSP页面声明JS变量。在<script>块中使用EL表达式接收数据，注意区分数值和字符串。
第四步：浏览器端校验。打开开发者工具（F12），在Console控制台打印变量，并右键“查看网页源代码”检查替换后的文本结构。

图3：从服务端注入到前端消费的端到端实现步骤

四、进阶模式：复杂对象与JSON序列化处理

当Java后端需要向前端传递包含复杂属性的实体对象（例如具有十余个字段的用户信息，或者嵌套的权限列表）时，直接使用EL表达式手工拼写属性不仅费时，还极易出现逗号遗漏或引号闭合错误。

标准的现代化做法是在后端控制器中，利用成熟的JSON库（如 Jackson、Gson 或 Fastjson）先将Java对象序列化为标准JSON字符串，再将其写入作用域：

// 后端 Servlet 或 Spring MVC 控制器
ObjectMapper mapper = new ObjectMapper();
String userJsonStr = mapper.writeValueAsString(currentUser);
request.setAttribute("userJsonStr", userJsonStr);

在JSP页面中，前端即可直接完成赋值：

<script type="text/javascript">
    // 方案 A：直接作为对象字面量嵌入（需确保 JSON 串无特殊未转义字符）
    const userData = ${userJsonStr};

    // 方案 B：包裹在字符串中，使用 JSON.parse 安全解析
    const safeUserData = JSON.parse('${fn:escapeXml(userJsonStr)}');
    console.log(userData.id, userData.name);
</script>

五、常见错误与避坑总结

初学者在JSP中嵌入JavaScript变量时，最常遭遇以下四类隐蔽故障：

1. 字符串未加引号导致 ReferenceError：
写成 var name = ${userName}; 时，若 userName 的值为 zhangsan，渲染出的结果是 var name = zhangsan;。JS引擎会将 zhangsan 误认为未声明的变量名，进而抛出 Uncaught ReferenceError: zhangsan is not defined。规范写法必须在外层包裹引号：var name = "${userName}";。

2. 值为 null 导致语法断裂或类型异常：
若Java对象为 null，JSP表达式 <%= val %> 会打印出英文字符串 null，而EL表达式 ${val} 则输出空字符串 ""。如果是数值声明 let count = ${count};，在为 null 时将渲染成 let count = ;，直接触发 Uncaught SyntaxError: Unexpected token ';'。应使用三元运算符设定默认值：let count = ${count != null ? count : 0};。

3. 字符串内部包含双引号或换行符：
若后端的文本内容本身包含回车换行或 " 双引号，直接拼入 "..." 会截断JS语句，引发 Unterminated string literal。传输多行或不可控富文本时，必须转义或转换为 Base64 / JSON 传递。