JSP页面中怎么嵌入JavaScript代码及数据交互方式

<!-- 示例：放在 </body> 闭合前的内联脚本块 -->
<body>
    <div id="appContainer">
        <h2>用户控制面板</h2>
    </div>

    <!-- 业务交互逻辑放在末尾，确保上面 DOM 已经就绪 -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            console.log("页面 DOM 节点已解析完毕，开始挂载业务交互事件");
        });
    </script>
</body>

<%-- 推荐：采用动态获取项目根目录的方式拼接绝对路径 --%>
<script src="${pageContext.request.contextPath}/static/js/user-manager.js"></script>

<script>
    // 数值类型：直接赋值，不需要单双引号包裹
    const currentUserId = ${sessionScope.currentUser.id};
    const isSystemAdmin = ${sessionScope.currentUser.isAdmin};

    // 字符串类型：必须用双引号或单引号包裹，否则浏览器会将其当成变量名从而报 ReferenceError
    const currentUserName = "${sessionScope.currentUser.username}";
</script>

如果后端传递的字符串中含有未转义的双引号（"）或换行符，会导致浏览器在执行到该行时发生 JavaScript 语法解析崩溃；更严重的是，恶意用户若在用户名中注入类似 ";alert(1);// 的字符，将直接触发跨站脚本攻击（XSS）。因此只推荐用于简单数字、布尔标量。

<%-- JSP 视图结构部分：利用 JSTL 标签安全渲染 --%>
<div id="userProfileCard" 
     class="profile-card"
     data-user-id="${user.id}"
     data-user-role="${user.role}"
     data-account-status="${user.status}">
    <span class="user-title">${user.displayName}</span>
</div>

<%-- 独立的外部 JS 文件（无需包含任何 JSP 语法） --%>
<script>
    const cardElement = document.getElementById("userProfileCard");
    // 通过 dataset 属性轻松读取（横杠转为驼峰命名）
    const userId = cardElement.dataset.userId;
    const userRole = cardElement.dataset.userRole;
    console.log("成功读取绑定的服务端用户数据:", userId, userRole);
</script>

<form id="orderForm" action="${pageContext.request.contextPath}/order/submit" method="POST">
    <!-- 存储主键 ID 和防跨站请求伪造的 Token -->
    <input type="hidden" id="orderId" name="orderId" value="${order.id}" />
    <input type="hidden" id="csrfToken" name="csrfToken" value="${sessionScope.csrfToken}" />
</form>

<script>
    // JavaScript 中方便地读取或动态修改值
    const orderId = document.getElementById("orderId").value;
    const csrfToken = document.getElementById("csrfToken").value;
</script>

<%-- 服务端使用 FastJson、Jackson 或 Gson 输出 JSON 字符串存入 request 属性 --%>
<script id="initialServerData" type="application/json">
    ${catalogJsonData}
</script>

<script>
    // 浏览器不会将 type="application/json" 当做可执行脚本执行，杜绝语法解析错误
    const rawData = document.getElementById("initialServerData").textContent;
    try {
        const catalogList = JSON.parse(rawData);
        console.log("解析成功，包含数据条数:", catalogList.length);
        // 使用该数据完成前端联动或表格渲染
    } catch (err) {
        console.error("服务端下发的数据非标准 JSON 格式:", err);
    }
</script>

// 获取交互按钮并绑定点击事件
const saveBtn = document.getElementById("saveConfigBtn");

saveBtn.addEventListener("click", function (event) {
    event.preventDefault(); // 阻止默认的表单跳转

    // 1. 采集需要提交的数据
    const requestData = {
        configId: document.getElementById("configId").value,
        threshold: document.getElementById("thresholdInput").value,
        notifyEnabled: document.getElementById("notifyCheckbox").checked
    };

    // 2. 发起异步 Fetch 请求
    fetch("${pageContext.request.contextPath}/api/config/update", {
        method: "POST",
        headers: {
            "Content-Type": "application/json;charset=UTF-8",
            "X-Requested-With": "XMLHttpRequest"
        },
        body: JSON.stringify(requestData)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("HTTP 状态码异常: " + response.status);
        }
        return response.json(); // 解析后端返回的 JSON 报文
    })
    .then(result => {
        // 3. 业务状态码校验与无刷新局部更新
        if (result.code === 200) {
            const statusLabel = document.getElementById("statusMessage");
            statusLabel.textContent = "更新成功！最新耗时: " + result.timestamp;
            statusLabel.style.color = "#15803D";
        } else {
            alert("操作失败: " + result.message);
        }
    })
    .catch(error => {
        console.error("请求链路失败:", error);
        alert("网络通信异常，请检查控制台日志");
    });
});

@WebServlet("/api/config/update")
public class ConfigUpdateServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
            throws ServletException, IOException {
        // 1. 强制统一字符编码
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        // 2. 关键：明确告知客户端返回的数据格式为标准 JSON，而非 HTML 页面
        resp.setContentType("application/json;charset=UTF-8");

        PrintWriter out = resp.getWriter();
        try {
            // 3. 读取请求体 JSON 字符串并进行业务处理
            StringBuilder sb = new StringBuilder();
            BufferedReader reader = req.getReader();
            String line;
            while ((line = reader.readLine()) != null) {
                sb.append(line);
            }

            // 模拟业务逻辑处理
            System.out.println("接收到前端提交载荷: " + sb.toString());

            // 4. 回写标准响应报文
            String jsonSuccess = "{"code":200, "message":"配置已生效", "timestamp":"" 
                                + System.currentTimeMillis() + ""}";
            out.print(jsonSuccess);
        } catch (Exception e) {
            resp.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
            out.print("{"code":500, "message":"服务端处理异常"}");
        } finally {
            out.flush();
        }
    }
}

<%-- 典型错误示范：严重混淆执行时空 --%>
<button onclick="doLogout()">退出登录</button>
<script>
    function doLogout() {
        // 错误！这里的 Java 代码在服务器生成 HTML 时就已经无条件执行了！
        <% session.removeAttribute("currentUser"); %>
        alert("退出成功");
    }
</script>

let email = ${user.email}; 
// 当 email 为 null 时，编译出的代码是：let email = ; 
// 浏览器直接抛出 Uncaught SyntaxError: Unexpected token ';'

在当前工程开发与系统维护中，最推荐的组合设计是：静态环境与初始凭据借助 HTML5 data-* 或 JSON 数据岛注入；页面加载完成后的所有业务流转、数据提交和列表检索全面交由 Fetch/Ajax 异步通信处理。这种架构既最大化利用了服务端模板渲染（SSR）在首屏呈现上的优势，又保留了单页应用般的流畅交互体验。