Express+EJS函数重复执行问题：提交按钮点击第二次无响应

问题原因分析 #

1. 二次点击无反应：你的/submit路由中，sillyName大概率是在路由外部定义的固定值（仅生成一次），每次访问/submit都会传递同一个值。第一次从/页面点击提交跳转到/submit时，标题更新为随机名；但第二次点击时，页面仍处于/submit路径，传递的还是同一个sillyName，所以标题看起来没有变化。
2. 地址栏出现问号：表单使用GET方法提交，由于表单没有任何输入字段，提交后URL会带上空的查询参数，也就是/submit?。

解决方案 #

1. 每次请求重新生成随机乐队名 #

将随机名的生成逻辑移到/submit路由的处理函数内部，确保每次请求都生成新的名字：

// 示例随机名生成函数，可根据你的实际逻辑替换
function generateSillyName() {
  const prefixes = ["Neon", "Rusty", "Cosmic"];
  const suffixes = ["Tigers", "Clouds", "Rockets"];
  const randomPrefix = prefixes[Math.floor(Math.random() * prefixes.length)];
  const randomSuffix = suffixes[Math.floor(Math.random() * suffixes.length)];
  return `${randomPrefix} ${randomSuffix}`;
}

app.get("/", (req, res) => {
  res.render("index.ejs");
});

app.get("/submit", (req, res) => {
  // 每次请求都生成新的随机名
  const sillyName = generateSillyName();
  res.render("index.ejs", { randomName: sillyName });
});

2. 改用POST方法消除地址栏问号 #

把表单的提交方法改成POST，同时在后端添加对应的POST路由，这样提交时不会在URL中添加查询参数：

前端EJS代码修改：

<body>
  <% if (locals.randomName) { %>
    <h1><%= randomName %> Band</h1>
  <% } else { %>
    <h1>Band name Generator 👇</h1>
  <% } %>
  <!-- 将method修改为POST -->
  <form action="/submit" method="POST">
    <input type="submit" value="Start" id="subbutone">
  </form>
</body>

后端代码修改：

// 解析POST请求的表单数据（Express 4.16+内置，无需额外安装依赖）
app.use(express.urlencoded({ extended: true }));

app.get("/", (req, res) => {
  res.render("index.ejs");
});

// 新增POST路由处理提交请求
app.post("/submit", (req, res) => {
  const sillyName = generateSillyName();
  res.render("index.ejs", { randomName: sillyName });
});

额外优化（可选） #

如果希望点击按钮后页面URL保持为/而非/submit，可以在POST路由处理完成后重定向到带随机名的首页：

app.post("/submit", (req, res) => {
  const sillyName = generateSillyName();
  // 重定向到首页并通过查询参数传递随机名
  res.redirect(`/?name=${encodeURIComponent(sillyName)}`);
});

// 修改首页路由接收查询参数
app.get("/", (req, res) => {
  const randomName = req.query.name;
  res.render("index.ejs", { randomName });
});

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