如何将Express路由的JS变量传入EJS模板渲染为可见文本

你的代码跑不通有4个核心问题：

• referral_code定义在POST路由的回调函数内，属于局部作用域变量，GET路由首次渲染页面时根本访问不到这个值
• EJS输出变量的语法错误，既不是{xxx}也不是$({xxx})，正确语法是<%= 变量名 %>
• 调用res.render渲染EJS模板时没有传入模板变量对象，模板拿不到任何后端传递的数据
• 前端AJAX逻辑存在语法错误，无法将接口返回的推荐码插入到页面中，同时DOM选择器和元素ID不匹配，拿不到输入框的值

根据你的业务逻辑（用户提交邮箱后生成专属推荐码），有两种实现方式可以选： #

方式1：异步接口返回后前端插入内容（适配你当前的AJAX提交逻辑，改动最小） #

这种方式不需要在首次渲染页面时传值，用户提交表单、后端生成推荐码返回JSON后，直接用JS把内容插到页面上即可。

第一步：修正前端DOM和AJAX代码 #

首先修正你写错的输入框ID，把推荐码输入框的冗余空格去掉，保证ID和选择器对应：

<!-- 原来的id多了空格，改成和选择器匹配的名字 -->
<input type="text" id="referrer" placeholder="Referral code">

然后修改AJAX逻辑，删掉配置对象里错误的赋值语句，在成功回调里拼接推荐链接、插入页面：

$('#submit').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    url: '/',
    type: "POST",
    data: {
      'email': $('#email').val(),
      'referrer': $('#referrer').val() // 和上面的输入框ID对应
    },
    success: function(res) {
      // 拼接完整推荐链接：当前域名+推荐码参数，不需要硬编码站点地址
      const fullReferralLink = window.location.origin + '/?ref=' + res.referralCode;
      // 把推荐链接插入到页面对应位置
      $('#newAffiliate').text(fullReferralLink);
      alert('注册成功，你的推荐码是: ' + res.referralCode);
    },
    error: function(jqXHR, textStatus, errorMessage) {
      alert('提交失败：' + errorMessage);
    }
  });
})

最后把<span id='newAffiliate'>标签里的{referral_code}占位符删掉即可，初始状态为空，提交成功后会自动填充内容。 #

方式2：后端直接渲染传值（适合提交后刷新页面展示的场景） #

如果你不想用前端JS插入内容，想让EJS直接在服务端渲染好带推荐码的页面返回，可以修改POST路由的逻辑，生成推荐码后直接渲染模板传值。

第一步：修改后端路由 #

首先修改GET路由，首次打开页面时传入站点基础地址，同时做容错处理：

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', {
    // 首次打开页面还没生成推荐码，传空值
    fullReferralLink: '',
    siteUrl: req.protocol + '://' + req.get('host') + '/?ref='
  });
});

然后修改POST路由，数据库操作完成后直接渲染模板，把生成的推荐码、拼接好的链接传给EJS：

connection.query(query, [email, referral_code, referrer], (err, rows) => {
  connection.end(function() {
    if (err) return next();
    // 拼接完整推荐链接
    const fullReferralLink = req.protocol + '://' + req.get('host') + '/?ref=' + referral_code;
    // 直接渲染页面，传入变量
    res.render('index', {
      referralCode: referral_code,
      fullReferralLink: fullReferralLink,
      siteUrl: req.protocol + '://' + req.get('host') + '/?ref='
    });
  });
});

第二步：修改EJS模板的变量输出 #

把原来span标签里的{referral_code}替换成EJS输出语法：

<span id='newAffiliate'>
  <%= fullReferralLink %>
</span>

注意：<%= %>标签会自动转义HTML特殊字符，适合展示普通文本，避免XSS风险。如果要输出未转义的HTML内容才用<%- %>，普通文本展示不要用这个标签 #

不要硬编码站点域名，否则换部署环境（比如从测试环境换到正式域名）就要改代码：

• 服务端拼接：用req.protocol + '://' + req.get('host')获取当前站点的域名和协议，后面拼接路径和参数即可
• 前端拼接：用window.location.origin获取当前站点根地址，后面拼接路径和参数即可

推荐链接的常规格式是站点域名/?ref=推荐码，其他用户通过这个链接访问时，你可以在GET路由里通过req.query.ref拿到对应的推荐码，自动填充到推荐人输入框里。

• EJS的变量名要和后端res.render传入的键名完全一致，比如后端传的键是referralCode，模板里就不能写referral_code，大小写、拼写都要对应
• 不要把变量定义在路由回调的局部作用域里试图让其他路由访问，不同请求的作用域是隔离的，要传值要么通过res.render参数传，要么存在session/数据库里
• 写DOM选择器的时候要和元素ID完全对应，不要加多余空格、写错字符，否则拿不到DOM元素的值

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