使用AJAX调用Node.js后端接口无法更新EJS模板渲染变量问题求助

云原生阿岚

2026-9-24

核心问题原因

EJS是服务端渲染模板，它的所有逻辑执行、变量填充都是在服务端返回HTML页面给浏览器之前就已经完成的。你在浏览器端触发AJAX请求的时候，本地的EJS模板早就已经被解析成静态HTML了，自然没法用AJAX返回的新变量触发EJS的条件渲染。
另外你当前的代码还有三个明显问题：

AJAX请求没有写success回调，就算后端返回了内容，前端也拿不到结果，更没法更新页面
重复定义了两次完全相同的AJAX请求，删掉一份即可，避免浪费服务器资源
后端现在针对AJAX请求还是返回完整渲染的home页面，不是你需要的动态数据，返回内容不符合需求

推荐解决方案：后端返回JSON，前端手动更新DOM

步骤1：修改后端接口，区分普通请求和AJAX请求

// pages.js 修改后代码
if (req.xhr) { // 框架内置方法判断当前是否为AJAX请求
  // AJAX请求直接返回JSON格式数据
  res.json({
    userName: result[0].twitchName,
    isLive: liveStatus,
    userID: result[0].id,
    benachrichtigung: benachrichtigung,
    twitchPBUrl: twitchPBLink,
    variableX: 你条件判断要用到的变量值 // 补充返回你做头部判断的variableX
  })
} else {
  // 普通页面访问走原来的完整页面渲染逻辑
  res.render('home', {
    pageName: "",
    userName: result[0].twitchName,
    isLive: liveStatus,
    userID: result[0].id,
    benachrichtigung: benachrichtigung,
    twitchPBUrl: twitchPBLink,
    variableX: 初始默认值
  });
}

步骤2：给要动态更新的头部加唯一ID

给你EJS里的头部区域加个ID，方便前端JS快速选中节点：

<!-- 你的EJS原有头部代码 -->
<header id="siteHeader">
<% if(variableX === 0){ %>
  这里是默认头部内容
<% } else{ %>
  登录头部，欢迎<%= userName %>
<% } %>
</header>

步骤3：修改前端AJAX代码，加回调更新DOM

<script type="text/javascript">
$(document).ready(function() {
  $.ajax({
    type: 'post',
    url: '/',
    dataType: 'json', // 改为接收JSON格式数据
    success: function(res) {
      // 拿到返回数据后手动做条件判断，替换头部内容
      let newHeaderContent = ''
      if (res.variableX === 0) {
        newHeaderContent = '这里是默认头部内容'
      } else {
        newHeaderContent = `登录头部，欢迎${res.userName}`
      }
      $('#siteHeader').html(newHeaderContent)
      // 其他需要更新的页面内容也可以在这里依次处理
    }
  })
});
</script>

轻量替代方案：后端返回渲染好的HTML片段

如果不想写太多前端DOM操作，可以单独抽离头部为EJS片段，AJAX请求时后端直接返回渲染好的头部HTML，前端直接插入即可：

新建header.ejs片段文件，放头部的渲染逻辑
后端AJAX请求时直接渲染这个片段返回：res.render('header', {userName: xxx, variableX: xxx})
前端AJAX成功回调里直接插入返回的HTML：$('#siteHeader').html(res)

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