如何通过EJS与Express实现表单提交后跳转并获取字段值

1. 修正magic.ejs的表单代码 #

原表单缺少提交必备的属性，需要补充提交方式、目标路由，并修正按钮类型：

<form method="get" action="/magiclist">
    <input type="text" name="name" placeholder="Name">
    <input type="email" name="email" placeholder="Email">
    <button type="submit">Submit</button>
</form>

• method="get"：指定用GET方式提交表单，参数会附加在URL末尾
• action="/magiclist"：指定表单提交后跳转的路由地址
• type="submit"：让按钮具备触发表单提交的功能（原type="button"只是普通按钮，无法触发提交）

2. 修改路由逻辑获取表单值 #

在路由中通过req.query对象获取GET方式提交的表单参数，再将参数传递给magiclist.ejs模板：

app.get("/magiclist", (req, res) => {
  // 提取表单提交的name和email值
  const { name, email } = req.query;
  // 把参数和原有数据一起传给模板
  res.render("magiclist", { 
    magicNpcList: magicNpcList,
    userName: name,
    userEmail: email
  });
});

3. 在magiclist.ejs中访问表单值 #

在magiclist.ejs里直接使用传入的变量即可展示提交内容，示例如下：

<h2>提交的信息</h2>
<p>姓名: <%= userName %></p>
<p>邮箱: <%= userEmail %></p>

可选：POST方式提交（不暴露URL参数） #

如果不想在URL中显示参数，可改用POST提交，需额外配置：

1. 安装并引入body-parser中间件：

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));

2. 修改magic.ejs的表单提交方式为POST：

<form method="post" action="/magiclist">
    <!-- 表单字段保持不变 -->
</form>

3. 添加POST路由处理提交，再重定向到GET路由传递参数：

app.post("/magiclist", (req, res) => {
  const { name, email } = req.body;
  // 对参数编码后拼入URL，避免特殊字符问题
  res.redirect(`/magiclist?name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}`);
});
// 原GET路由保持不变，依然通过req.query获取参数

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