如何在EJS页面的jQuery脚本中获取控制器传递的变量与服务器生成消息

这个错误出现的核心原因是：EJS变量是服务器端渲染时存在的，而jQuery运行在客户端浏览器中，直接引用服务器端变量会导致客户端JS无法识别它。要解决这个问题，我们需要把服务器端的errorMessage变量先注入到客户端的JS环境或者DOM中，再让jQuery去读取。

下面给你几种可靠的解决方案：

方案1：将EJS变量注入全局window对象 #

这是最简单直接的方式，在EJS页面内的<script>标签中（服务器渲染时会解析EJS标签），把errorMessage赋值给全局的window属性，这样客户端的jQuery就能直接访问它了。

步骤： #

1. 在你的EJS页面中，添加一段内联脚本注入变量：

<!-- 放在jQuery脚本之前，比如<head>或<body>内 -->
<script>
  // 使用JSON.stringify确保变量格式合法，避免引号等语法问题
  // 加判断防止变量不存在时输出undefined导致JS报错
  window.errorMessage = <%= errorMessage ? JSON.stringify(errorMessage) : null %>;
</script>

2. 在你的jQuery脚本中访问这个全局变量：

$(document).ready(function() {
  // 直接通过window.errorMessage访问，或者省略window前缀
  if (errorMessage) {
    // 示例：把错误信息显示到页面的错误容器中
    $('.error-box').text(errorMessage).addClass('visible');
  }
});

方案2：将变量存储到DOM元素的data属性中 #

如果你不想污染全局作用域，可以把变量存在DOM元素的自定义data属性里，再用jQuery的data()方法读取。

步骤： #

1. 在EJS页面的某个DOM元素上添加data属性：

<!-- 比如页面的根容器 -->
<div id="page-container" data-error="<%= JSON.stringify(errorMessage) %>"></div>

2. 在jQuery中读取并解析这个属性：

$(function() {
  // 读取data属性并解析成JS值（因为存的是JSON字符串）
  const errorMessage = JSON.parse($('#page-container').data('error'));
  
  if (errorMessage) {
    // 执行你的逻辑，比如弹出提示
    alert(errorMessage);
  }
});

常见坑点要注意 #

• 不要在外部JS文件中直接写EJS标签：如果你的jQuery代码是放在单独的.js文件中（比如app.js），服务器不会解析外部JS文件里的<%= %>标签，所以必须先在EJS页面内把变量注入到客户端环境，再让外部JS去访问。
• 处理变量不存在的情况：如果控制器可能不传errorMessage，一定要在EJS中做判断，避免输出undefined导致客户端JS报错，就像方案1里的errorMessage ? ... : null那样。

完整示例（Express + EJS + jQuery） #

控制器代码：

// Express路由控制器
app.get('/login', (req, res) => {
  // 假设验证失败，传递错误信息
  res.render('login', { errorMessage: '用户名或密码不正确，请重试' });
});

EJS页面代码：

<!DOCTYPE html>
<html>
<head>
  <title>登录页</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    .error-box { color: red; display: none; margin: 10px 0; }
  </style>
</head>
<body>
  <div class="error-box"></div>
  
  <form>
    <!-- 登录表单内容 -->
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>

  <!-- 注入全局变量 -->
  <script>
    window.errorMessage = <%= errorMessage ? JSON.stringify(errorMessage) : null %>;
  </script>

  <!-- jQuery逻辑 -->
  <script>
    $(function() {
      if (window.errorMessage) {
        $('.error-box').text(errorMessage).show();
      }
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Jon_B