如何将POST查询的数据库结果返回至view.html而非index.html

嗨，我来帮你搞定这个需求！要把数据库查询结果发送到view.html而非原提交页面index.html，有几种实用的实现方式，我给你拆解清楚：

方案一：服务器端处理（适合需要后端控制页面渲染的场景） #

子方案1：使用模板引擎直接渲染view页面 #

如果你的项目用了模板引擎（比如EJS、Pug），可以直接把查询到的数据传递给模板并渲染出view.html：

1. 先在你的aws.js里配置模板引擎（以EJS为例）：

const path = require('path');
// 配置EJS作为模板引擎
app.set('view engine', 'ejs');
// 指定模板文件存放目录（比如项目根目录下的views文件夹）
app.set('views', path.join(__dirname, 'views'));

2. 把你的view.html重命名为view.ejs，放到views目录下，在模板里可以直接用变量展示数据，比如：

<!-- view.ejs -->
<h1>Your Application Details</h1>
<% if (Object.keys(shopper).length > 0) { %>
  <p>Email: <%= shopper.email %></p>
  <!-- 其他字段同理 -->
<% } else { %>
  <p>No application found for this email.</p>
<% } %>

3. 修改/view路由，直接渲染模板并传递数据：

app.post('/view', function(req, res) {
  var email = req.body.emailView;
  var paramsRead = {
    TableName: tableNameShopper,
    Key:{
      "email": email
    }
  };
  readFromTable(paramsRead).then((results) => {
    var objShopper = JSON.parse(results);
    // 直接渲染view.ejs，把数据作为参数传递
    res.render('view', { shopper: objShopper });
  });
});

子方案2：静态页面+Session传递数据 #

如果你的view.html是纯静态文件，可以用Session暂存数据，再重定向到静态页面后读取：

1. 先安装并配置express-session：

npm install express-session

// aws.js里添加Session配置
const session = require('express-session');
app.use(session({
  secret: 'your-custom-secret-key', // 换成自己的安全密钥，生产环境要保密
  resave: false,
  saveUninitialized: true,
  cookie: { 
    secure: false, // 生产环境请开启HTTPS并设为true
    maxAge: 60000 // 数据保留1分钟，可按需调整
  }
}));

2. 修改/view路由，把数据存入Session后重定向到view.html：

app.post('/view', function(req, res) {
  var email = req.body.emailView;
  var paramsRead = {
    TableName: tableNameShopper,
    Key:{
      "email": email
    }
  };
  readFromTable(paramsRead).then((results) => {
    var objShopper = JSON.parse(results);
    // 把数据存入Session
    req.session.shopperData = objShopper;
    // 重定向到静态的view.html
    res.redirect('/view.html');
  });
});

3. 在view.html里添加脚本，通过新接口读取Session数据：

<!-- view.html -->
<div id="app-details"></div>

<script>
window.onload = async function() {
  // 请求后端接口获取Session里的数据
  const response = await fetch('/get-shopper-data');
  const shopperData = await response.json();
  
  const container = document.getElementById('app-details');
  if (Object.keys(shopperData).length > 0) {
    container.innerHTML = `<p>Email: ${shopperData.email}</p>`;
    // 展示其他字段
  } else {
    container.innerHTML = '<p>No application found.</p>';
  }
  
  // 可选：用完数据后清除Session，避免残留
  await fetch('/clear-shopper-data');
};
</script>

4. 在aws.js里添加两个辅助接口：

// 获取Session中的数据
app.get('/get-shopper-data', function(req, res) {
  res.json(req.session.shopperData || {});
});

// 清除Session中的数据
app.get('/clear-shopper-data', function(req, res) {
  delete req.session.shopperData;
  res.sendStatus(200);
});

方案二：前端异步提交+本地存储传递数据（适合纯静态前端场景） #

这种方式不需要模板引擎，通过前端AJAX提交表单，拿到数据后跳转并存在本地存储：

1. 修改index.html的表单，阻止默认提交，改用异步请求：

<!-- index.html -->
<form id="view-form">
  <input type="email" placeholder="Enter Your Email" name="emailView" id="txtEmailView">
  <input type="submit" id="btnView" value="View Application">
</form>

<script>
document.getElementById('view-form').addEventListener('submit', async function(e) {
  e.preventDefault(); // 阻止默认表单提交行为
  
  const email = document.getElementById('txtEmailView').value;
  const response = await fetch('/view', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ emailView: email })
  });
  
  const shopperData = await response.json();
  // 把数据存入localStorage
  localStorage.setItem('shopperData', JSON.stringify(shopperData));
  // 跳转到view.html
  window.location.href = '/view.html';
});
</script>

2. 修改/view路由，返回JSON格式的数据：

app.post('/view', function(req, res) {
  var email = req.body.emailView;
  var paramsRead = {
    TableName: tableNameShopper,
    Key:{
      "email": email
    }
  };
  readFromTable(paramsRead).then((results) => {
    var objShopper = JSON.parse(results);
    // 返回JSON数据给前端
    res.json(objShopper);
  });
});

3. 在view.html里读取localStorage的数据并展示：

<!-- view.html -->
<div id="app-details"></div>

<script>
window.onload = function() {
  // 从localStorage读取数据
  const shopperData = JSON.parse(localStorage.getItem('shopperData')) || {};
  const container = document.getElementById('app-details');
  
  if (Object.keys(shopperData).length > 0) {
    container.innerHTML = `<p>Email: ${shopperData.email}</p>`;
    // 展示其他字段
  } else {
    container.innerHTML = '<p>No application found.</p>';
  }
  
  // 用完数据后清除localStorage，避免下次打开残留
  localStorage.removeItem('shopperData');
};
</script>

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