使用Express.js无法跳转HTML页面：点击按钮无响应无报错

问题根源 #

你的Start按钮设置了type="button"，这种类型的按钮不会自动触发表单提交，导致<form>的POST请求根本没有发送到服务器，app.js中定义的POST路由也就不会执行，自然无法跳转到predict.html页面。

修复方案 #

方案1：修改按钮类型为submit（最简单）

直接将按钮的type属性从button改为submit，点击按钮时会自动提交表单，触发服务器的POST请求：

<!-- 修改后的按钮代码 -->
<button type="submit" class="btn btn-warning btn-lg start" style="color: white; width: 150px; font-size: 2em;"> Start</button>

方案2：用JavaScript手动提交表单

如果需要保留type="button"，可以给按钮添加点击事件，手动提交表单：

1. 给表单添加id标识：

<form method="post" id="start-form">
  <button type="button" class="btn btn-warning btn-lg start" style="color: white; width: 150px; font-size: 2em;"> Start</button>
</form>

2. 在页面底部添加JavaScript代码：

document.querySelector('.start').addEventListener('click', function() {
  document.getElementById('start-form').submit();
});

方案3：用a标签替代表单（更直接）

如果不需要表单提交数据，完全可以用<a>标签替代表单和按钮，直接通过GET请求跳转：

1. 修改index.html中的按钮部分：

<a href="/predict" class="btn btn-warning btn-lg start" style="color: white; width: 150px; font-size: 2em; display: inline-block; text-decoration: none;">Start</a>

2. 在app.js中添加对应的GET路由：

app.get("/predict", function(req,res){
    res.sendFile(__dirname + "/public/predict.html");
});

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