Node.js Express服务器表单提交未正确跳转至指定页面问题

核心问题原因 #

1. 前端URL更新逻辑错误：
   你的updateURL函数依赖window.location.href.split('?')[0]获取当前页面基础路径，若当前页面是根路径/，拼接参数后会生成/?q=xxx&start=1，而非期望的/search?q=xxx&start=1。同时表单提交事件用event.preventDefault()阻止了默认跳转，转而通过pushState修改URL，但基础路径未指定为/search，导致URL更新错误。

2. 后端Express配置顺序错误：
   app.listen(port)被放在路由和中间件定义的中间位置，导致listen之后的路由（如最后一个app.get('/search')）和中间件无法被服务器注册生效。且该重复路由错误地用req.body.query获取GET参数——GET请求参数应从req.query中读取，不过该路由因位置问题根本未生效。

具体解决方案 #

1. 修复前端URL更新逻辑 #

修改updateURL函数，直接指定/search作为基础路径：

function updateURL(query, start) {
  var url = '/search?q=' + encodeURIComponent(query) + '&start=' + start;
  window.history.pushState({ path: url }, '', url);
}

同时调整表单提交回调，首次搜索默认从第1条结果开始：

$('#search-form').on('submit', function(event) {
  event.preventDefault();
  var query = $('#search-input').val();
  search(query, 1); // 手动指定start为1，避免依赖全局变量
});

2. 修复后端Express配置 #

将app.listen(port)移至所有路由和中间件定义的最后，确保所有配置生效，并删除无效的重复路由：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;

// 基础配置
app.set('view engine', 'ejs');
app.use(express.static('views/src'));
app.use(bodyParser.urlencoded({ extended: true }));

// 路由定义
app.get('/', (req, res) => {
  res.render('index', { title: 'Nitria' });
});

app.get('/search', (req, res) => {
  res.render('search');
});

app.post('/display-input', (req, res) => {
  const input = req.body.hello;
  res.render('input', { input });
});

app.get('/input', (req, res) => {
  res.render('input');
});

// 最后启动服务器
app.listen(port, () => {
  console.log('Server started on port ' + port);
});

3. 额外优化（可选） #

若希望后端直接传递查询参数给模板，可修改/search路由，让前端无需解析URL：

app.get('/search', (req, res) => {
  const query = req.query.q || '';
  const start = req.query.start || 1;
  res.render('search', { query, start });
});

之后在EJS模板中可直接用<%= query %>和<%= start %>初始化前端变量。

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