如何在Express.js项目中提交表单时不新增历史记录且重载当前页面？

要做到表单提交不跳转、仅重载当前页面，核心是用AJAX异步提交表单数据，后端处理完成后返回响应，前端收到响应后手动触发页面重载。具体实现分前端（EJS）和后端（Express）两部分：

前端（EJS模板）修改 #

给表单添加ID并绑定提交事件，阻止默认跳转行为，用AJAX发送数据：

<!-- 你的表单 -->
<form id="myForm" method="POST" action="/submit-form">
  <input type="text" name="username" placeholder="用户名" required>
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', async function(e) {
  // 阻止表单默认跳转行为
  e.preventDefault();
  
  // 收集表单数据
  const formData = new FormData(this);
  
  try {
    // 异步发送POST请求
    const response = await fetch(this.action, {
      method: this.method,
      body: formData
    });
    
    // 解析后端响应
    const result = await response.json();
    
    if (result.success) {
      // 提交成功，重载当前页面
      location.reload();
    } else {
      // 提交失败，可在这里处理错误提示
      alert('提交失败：' + result.message);
    }
  } catch (error) {
    console.error('请求出错：', error);
    alert('网络异常，请稍后重试');
  }
});
</script>

后端（Express路由）修改 #

处理表单提交的路由，返回JSON格式响应，不要做重定向：

首先确保你已经配置了解析表单数据的中间件：

// 在app.js或入口文件中添加
app.use(express.urlencoded({ extended: true }));

然后编写处理表单的路由：

app.post('/submit-form', (req, res) => {
  // 获取表单数据
  const { username } = req.body;
  
  // 这里写你的业务逻辑，比如存入数据库、验证等
  try {
    // 假设业务处理成功
    // 如果需要在重载后显示提示，可以存入session
    req.session.successMsg = '提交成功！';
    
    res.json({ success: true });
  } catch (err) {
    res.json({ 
      success: false, 
      message: err.message || '处理失败' 
    });
  }
});

可选：重载后显示提示信息 #

如果需要在页面重载后显示提交结果，可以利用Express的session：

1. 先配置session中间件（比如express-session）
2. 后端处理完后把提示存入req.session
3. 在EJS模板中读取并渲染提示：

<!-- 在EJS页面合适的位置添加 -->
<% if (successMsg) { %>
  <div class="alert alert-success"><%= successMsg %></div>
  <% // 显示后清除session中的提示 %>
  <% req.session.successMsg = null; %>
<% } %>

这样用户提交表单后，页面不会跳转，而是等待后端处理完成后自动重载，同时还能看到提交结果的提示。

内容的提问来源于stack exchange，提问作者Rohit Sahu