从DOM向Express服务器提交注册表单数据失败，请求排查问题

我正尝试将注册表单与Express服务器对接以实现新用户注册功能，但无法从DOM正确发送POST请求。我的Express服务器已正常运行，通过Postman创建用户时，能正常发送欢迎邮件并将用户保存至MongoDB，但通过注册表单发送数据时却无法实现预期效果。

后端Express路由代码 #

const express = require('express');
const router = new express.Router();
const User = require('../models/user');
const sendWelcomeEmail = require('../emails/account');

// Route for creating a new user
router.post('/users', async (req, res) => {
  const user = new User(req.body);
  try {
    await user.save();
    sendWelcomeEmail(user.email, user.name);
    res.status(201).send({ user });
  } catch (e) {
    res.status(400).send(e);
  }
});

module.exports = router;

前端表单提交函数代码 #

$(function() {
  $('#register').on('click', function(event) {
    event.preventDefault();
    const name = document.querySelector('#InputName').value;
    const email = document.querySelector('#InputEmail').value;
    const phone = document.querySelector('#InputPhone').value;
    console.log(name, email, phone);
    if (!name || !email || !phone) {
      $('#msgDiv')
        .show()
        .html('All fields are required.');
      $.ajax({
        url: '/users',
        method: 'POST',
        data: { name: name, email: email, phone: phone }
      }).done(function(data) {
        if (data) {
          console.log(data);
          $('#msgDiv')
            .removeClass('alert-danger')
            .addClass('alert-success')
            .html(data.message)
            .show();
        }
      });
    }
  });
});

我来帮你梳理下问题根源，主要有几个关键错误需要修正：

1. 前端条件判断逻辑完全写反了 #

你当前的代码是只有当字段为空时才会发送AJAX请求，这和预期的“字段齐全才提交”完全相反！看这段代码：

if (!name || !email || !phone) {
  // 显示"必填字段"提示
  $.ajax({...}) // 这里在if块内，空字段时才发请求
}

正确的逻辑应该是：如果字段不全，显示错误提示；否则才发送注册请求。修改后的代码如下：

$(function() {
  $('#register').on('click', function(event) {
    event.preventDefault();
    const name = document.querySelector('#InputName').value;
    const email = document.querySelector('#InputEmail').value;
    const phone = document.querySelector('#InputPhone').value;
    console.log(name, email, phone);
    
    if (!name || !email || !phone) {
      $('#msgDiv')
        .removeClass('alert-success')
        .addClass('alert-danger')
        .show()
        .html('All fields are required.');
    } else { // 字段齐全时才发送请求
      $.ajax({
        url: '/users',
        method: 'POST',
        data: { name: name, email: email, phone: phone }
      }).done(function(data) {
        console.log(data);
        $('#msgDiv')
          .removeClass('alert-danger')
          .addClass('alert-success')
          .html(data.message || 'Registration successful!')
          .show();
      }).fail(function(error) { // 新增失败回调，方便调试
        console.error('Registration failed:', error);
        $('#msgDiv')
          .removeClass('alert-success')
          .addClass('alert-danger')
          .html('Registration failed. Please try again.')
          .show();
      });
    }
  });
});

2. 后端响应与前端读取字段不匹配 #

你的后端返回的是res.status(201).send({ user });，但前端尝试读取data.message——这个字段在后端响应里根本不存在，所以成功后不会显示预期的成功提示。可以修改后端代码，添加message字段：

// 后端路由修改
router.post('/users', async (req, res) => {
  const user = new User(req.body);
  try {
    await user.save();
    sendWelcomeEmail(user.email, user.name);
    res.status(201).send({ 
      user,
      message: 'Registration successful! Welcome aboard!'
    });
  } catch (e) {
    res.status(400).send({ 
      error: e.message,
      message: 'Registration failed. Please check your input.'
    });
  }
});

3. 确认Express服务器配置了表单解析中间件 #

虽然Express 4.16.0+内置了表单解析功能，但如果你的主app文件没有配置，后端req.body会是空的，导致无法创建用户。确保在app.js或主入口文件中添加：

const express = require('express');
const app = express();

// 解析表单格式的请求体（application/x-www-form-urlencoded）
app.use(express.urlencoded({ extended: true }));
// 解析JSON格式的请求体（Postman常用）
app.use(express.json());

// 挂载你的用户路由
const userRouter = require('./routers/user');
app.use(userRouter);

4. 建议添加错误调试 #

在前端AJAX中添加.fail()回调（上面已经加了），这样如果请求失败（比如网络错误、后端验证失败），你能在浏览器控制台看到具体错误信息，快速定位问题。

内容的提问来源于stack exchange，提问作者Leo Policastro