HTML表单POST回发后，如何用客户端JS获取数据填充表单？

首先明确：浏览器出于安全限制，客户端JavaScript无法直接获取POST请求的Payload数据——这就是你搜不到方法的核心原因。要实现需求，必须通过服务器端中转，以下是两个适合敏感数据场景的方案：

方案1：服务器端嵌入数据到页面（无需模板引擎） #

不用EJS/Handlebars这类模板引擎，直接通过字符串替换把POST数据嵌入到response.html的脚本中，数据仅在当前页面会话存在，页面刷新或关闭后就消失，不会留存到本地：

服务器端代码（Express） #

const fs = require('fs');
const path = require('path');
// 引入XSS清洗库，先执行npm install xss
const xss = require('xss');

app.post('/response', (req, res) => {
  // 第一步：清洗POST数据，防止XSS攻击（敏感数据必须做）
  const safeData = Object.fromEntries(
    Object.entries(req.body).map(([key, val]) => [key, xss(val)])
  );

  // 读取本地的response.html文件
  fs.readFile(path.join(__dirname, 'public', 'response.html'), 'utf8', (err, htmlContent) => {
    if (err) return res.status(500).send('加载页面失败');
    
    // 在response.html里提前留一个占位符：<!--POST_DATA_PLACEHOLDER-->
    const injectedHtml = htmlContent.replace(
      '<!--POST_DATA_PLACEHOLDER-->',
      `<script>const submittedFormData = ${JSON.stringify(safeData)};</script>`
    );

    res.send(injectedHtml);
  });
});

客户端代码（response.html） #

在页面里加入填充表单的逻辑：

<form id="reviewForm">
  <input type="text" name="username" id="username">
  <input type="email" name="email" id="email">
</form>

<!--POST_DATA_PLACEHOLDER-->
<script>
// 利用服务器注入的submittedFormData填充表单
if (typeof submittedFormData !== 'undefined') {
  document.getElementById('username').value = submittedFormData.username || '';
  document.getElementById('email').value = submittedFormData.email || '';
}
</script>

方案2：临时缓存+一次性Token（更适合高敏感数据） #

如果数据敏感度极高，不想把数据直接嵌入页面，可通过服务器端临时缓存存储数据，用一次性Token获取：

服务器端代码（Express） #

const crypto = require('crypto');
// 开发用内存缓存，生产环境建议替换为Redis
const tempStorage = new Map();

app.post('/response', (req, res) => {
  // 生成唯一的一次性Token
  const token = crypto.randomBytes(16).toString('hex');
  // 设置5分钟过期，防止数据残留
  const expiresAt = Date.now() + 5 * 60 * 1000;
  // 存储清洗后的POST数据
  const safeData = Object.fromEntries(
    Object.entries(req.body).map(([key, val]) => [key, xss(val)])
  );
  tempStorage.set(token, { data: safeData, expiresAt });

  // 重定向到response.html，把Token放在查询参数（或用HttpOnly Cookie更安全）
  res.redirect(`/response.html?token=${token}`);
});

// 提供接口获取数据
app.get('/api/get-form-data', (req, res) => {
  const { token } = req.query;
  if (!token || !tempStorage.has(token)) {
    return res.status(400).json({ error: '无效或过期的Token' });
  }

  const { data, expiresAt } = tempStorage.get(token);
  // 检查是否过期
  if (Date.now() > expiresAt) {
    tempStorage.delete(token);
    return res.status(400).json({ error: 'Token已过期' });
  }

  // 返回数据后立即删除，确保一次性使用
  tempStorage.delete(token);
  res.json(data);
});

客户端代码（response.html） #

<form id="reviewForm">
  <input type="text" name="username" id="username">
  <input type="email" name="email" id="email">
</form>

<script>
// 获取URL里的Token
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');

if (token) {
  fetch(`/api/get-form-data?token=${token}`)
    .then(res => res.json())
    .then(data => {
      document.getElementById('username').value = data.username || '';
      document.getElementById('email').value = data.email || '';
    })
    .catch(err => console.error('获取数据失败:', err));
}
</script>

关键注意事项 #

• 无论哪种方案，必须对用户输入做XSS清洗，防止恶意脚本注入；
• 敏感数据绝对不要用LocalStorage/SessionStorage，避免XSS攻击导致数据泄露；
• 方案2的内存缓存仅适合开发/小流量场景，生产环境建议用Redis这类带过期策略的缓存服务。

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