使用Express.js实现页面重定向的代码为何无法正常运行？

前端代码问题 #

• 提交按钮ID为placeorder，但JS中错误使用document.getElementById("checkout")获取元素，导致placeorder变量为null，绑定点击事件时会报错；且该事件中用event.preventDefault()阻止了表单默认提交行为，表单根本没有发送POST请求。
• 多余的提交按钮点击事件完全没必要，直接删除即可，依赖表单默认提交行为就能正常触发请求。

修复后的menu.ejs代码：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div>
  Choose what you want to have-
</div>
<form action="/CheckOut" method="post">
  <div class="lays">lays</div>
  <input type="number" value="0" id="input" name="input" />
  <button id="minus">−</button>
  <button id="plus">+</button>
  <input type="submit" id="placeorder" value="Place Order"></input>
</form>

<script>
  const minusButton = document.getElementById('minus');
  const plusButton = document.getElementById('plus');
  const inputField = document.getElementById('input');

  minusButton.addEventListener('click', event => {
    event.preventDefault();
    const currentValue = Number(inputField.value) || 0;
    if (currentValue > 0) {
      inputField.value = currentValue - 1;
    }
  });

  plusButton.addEventListener('click', event => {
    event.preventDefault();
    const currentValue = Number(inputField.value) || 0;
    inputField.value = currentValue + 1;
  });
</script>
</body>
</html>

后端代码问题 #

• /CheckOut接口的try块中没有返回任何响应，请求发送后服务器一直未给客户端回复，导致页面持续加载。
• catch块中重定向路径为/orderpage，但后端定义的路由是/orderPage（大小写不一致），即使触发catch也会跳转到404页面。

修复后的script.js代码：

const express = require("express")
const app = express()

const order = []
app.use(express.urlencoded({extended:false}))
app.set('view engine', 'ejs') // 补充设置ejs为模板引擎，确保渲染正常

app.post("/CheckOut", async(req, res) => {
    try {
      order.push({
        amount: req.body.input
      }) 
      console.log(order)
      // 成功后重定向到订单页面
      res.redirect("/orderPage")
    } catch (e){
      console.log(e);    
      // 失败时也重定向，或根据需求返回错误页面
      res.redirect("/orderPage")
    }
})

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

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

app.listen(8000, () => {
  console.log("Server running on port 8000")
})

额外注意点 #

• 确保orderPage.ejs文件存在于项目的views目录下（根据文件结构截图，当前目录结构符合要求）。
• 启动服务器后，访问http://localhost:8000测试提交功能。

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