POST查询MySQL后如何传递不同结果渲染两个HTML页面？

因为一次HTTP请求只能返回一个响应，所以你不能在同一个请求里执行两次res.render。以下是几种适配你需求的方案：

方案1：会话（Session）存储 + 分路由渲染 #

先将其中一个值存入会话，渲染第一个页面后，通过前端跳转触发第二个页面的渲染并读取会话数据：

1. 处理POST请求，存储数据并渲染account页面：

app.post('/your-post-endpoint', (req, res) => {
  // 假设已获取MySQL查询结果result
  req.session.Username = result[1]; // 将第二个值存入session
  res.render('account', { TodayTotal: result[0] }); // 渲染第一个页面
});

2. 新增layout页面的路由，读取会话数据并渲染：

app.get('/layout', (req, res) => {
  const Username = req.session.Username;
  // 可选：清理会话中的数据，避免后续请求误用
  delete req.session.Username;
  res.render('layout', { Username });
});

3. 在account页面的前端代码中，添加跳转逻辑（比如页面加载完成后自动跳转，或通过用户操作触发）：

<script>
  // 页面加载完成后跳转到layout页面
  window.addEventListener('load', () => {
    window.location.href = '/layout';
  });
</script>

方案2：拆分接口 + 前端异步请求 #

将数据拆分为两个独立的接口，前端分别在对应页面发起请求获取数据：

1. 后端新增两个接口，返回对应数据（可缓存MySQL查询结果避免重复查询）：

// 缓存查询结果（示例用内存缓存，生产环境建议用Redis）
let queryCache = null;

app.post('/your-post-endpoint', (req, res) => {
  // 执行MySQL查询并缓存结果
  queryCache = { TodayTotal: result[0], Username: result[1] };
  // 返回成功标识，让前端去请求对应数据接口
  res.json({ status: 'success' });
});

// 获取TodayTotal的接口
app.get('/api/today-total', (req, res) => {
  if (queryCache) {
    res.json({ TodayTotal: queryCache.TodayTotal });
    // 可选：设置缓存过期时间
    setTimeout(() => queryCache = null, 60000);
  } else {
    res.status(404).json({ error: 'No data available' });
  }
});

// 获取Username的接口
app.get('/api/username', (req, res) => {
  if (queryCache) {
    res.json({ Username: queryCache.Username });
  } else {
    res.status(404).json({ error: 'No data available' });
  }
});

2. 前端在account页面加载时请求第一个接口：

// account页面的脚本
fetch('/api/today-total')
  .then(res => res.json())
  .then(data => {
    // 渲染TodayTotal到页面
    document.getElementById('today-total').textContent = data.TodayTotal;
  });

3. 在layout页面加载时请求第二个接口：

// layout页面的脚本
fetch('/api/username')
  .then(res => res.json())
  .then(data => {
    // 渲染Username到页面
    document.getElementById('username').textContent = data.Username;
  });

方案3：Cookie传递数据（替代Session） #

如果不想用Session，可以用Cookie暂存数据，逻辑和Session类似：

1. POST请求处理：

app.post('/your-post-endpoint', (req, res) => {
  // 将Username存入Cookie，设置HttpOnly提高安全性
  res.cookie('Username', result[1], { httpOnly: true, maxAge: 60000 });
  res.render('account', { TodayTotal: result[0] });
});

2. layout路由读取Cookie并渲染：

app.get('/layout', (req, res) => {
  const Username = req.cookies.Username;
  // 清理Cookie
  res.clearCookie('Username');
  res.render('layout', { Username });
});

注意事项 #

• 无论用Session还是Cookie，都要注意清理暂存的数据，避免数据残留导致逻辑错误
• 内存缓存仅适用于单实例服务，多实例部署建议用Redis等分布式缓存
• 如果你的模板引擎支持继承（比如EJS的include、Pug的继承），可以尝试将两个数据都传给主页面，通过模板嵌套自动传递数据给子模板，但这需要你的页面结构支持合并渲染（你提到无法合并，此方案可作为备选）

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