在HTML/Node.js中跨EJS页面传递文本框数据的实现方法

针对两个EJS页面间的用户名传递需求，结合EJS服务器端渲染的特性，提供两种实用实现方式：

方法一：服务器端路由传参（表单提交场景） #

这是登录场景下最常用的方案，适合表单提交后跳转页面的流程：

1. 处理登录表单的后端逻辑
   假设你用Express框架，在登录路由中接收表单提交的用户名，验证通过后传递给目标EJS页面：

// Express路由示例
app.post('/login', (req, res) => {
  const username = req.body.txtUsername;
  // 此处可添加密码验证、用户校验等逻辑
  // 验证通过后，渲染目标页面并传入用户名变量
  res.render('目标页面文件名', { username });
});

2. 在目标EJS页面填充输入框
   修改目标页面的禁用输入框代码，用EJS模板变量直接赋值value属性：

<input class="form-control" type="text" id="txtUsername" 
  name="txtUsername" value="<%= username %>" placeholder="kullanıcı ismi" disabled>

注：<%= %>是EJS的转义输出标签，能避免XSS风险，适合渲染用户输入内容。

方法二：客户端本地存储传递（无刷新跳转场景） #

如果是通过AJAX提交表单、客户端跳转的场景，可临时用浏览器本地存储传递数据：

1. 登录页面监听表单提交，保存用户名

document.getElementById('loginForm').addEventListener('submit', (e) => {
  e.preventDefault(); // 阻止默认表单提交
  const username = document.getElementById('txtUsername').value;
  localStorage.setItem('tempUsername', username);
  
  // 此处可添加AJAX验证逻辑，验证通过后跳转目标页面
  window.location.href = '/目标页面路径';
});

2. 目标页面读取存储并赋值

<input class="form-control" type="text" id="txtUsername" 
  name="txtUsername" value="" placeholder="kullanıcı ismi" disabled>

<script>
window.addEventListener('load', () => {
  const username = localStorage.getItem('tempUsername');
  if (username) {
    document.getElementById('txtUsername').value = username;
    // 可选：用完清除存储，避免数据残留
    localStorage.removeItem('tempUsername');
  }
});
</script>

额外建议 #

• 服务器端方案安全性更高，数据由后端控制，适合正式登录流程；
• 若需长期保持登录状态，可结合Session存储用户名，目标页面从Session中读取：

// 登录路由中存入Session
req.session.username = username;
// 目标页面渲染时从Session取值
res.render('目标页面', { username: req.session.username });

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