前端JQuery Ajax与Spring Boot后端用户注册接口联调失败排查

错误原因 #

你的请求实际触发了错误的URL：http://localhost:8080/users/users，后端控制器会把路径里的第二个users解析成@PathVariable Long id的参数，尝试将字符串"users"转为Long类型，导致类型转换失败。

根源有两个：

• HTML表单未设置正确的id，导致jQuery的submit事件绑定失败，表单触发了默认提交行为，请求了action属性里的错误地址。
• jQuery代码里的字段名和实体类不匹配，即使请求成功也无法正确映射到实体类。

修复步骤 #

1. 修正HTML表单代码 #

给表单添加id="signup-form"，移除多余的action属性（Ajax提交不需要默认action）：

<div class="container mt-5">
  <h2>Registration Form</h2>
  <form id="signup-form">
    <div class="form-group">
      <label for="email">Email address:</label>
      <input type="email" class="form-control" id="email">
    </div>
    <div class="form-group">
      <label for="firstName">Firstname:</label>
      <input type="text" class="form-control" id="firstName">
    </div>
    <div class="form-group">
      <label for="lastName">Lastname:</label>
      <input type="text" class="form-control" id="lastName">
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" class="form-control" id="password">
    </div>
    <div class="form-group">
      <label for="confirmPassword">Confirm Password:</label>
      <input type="password" class="form-control" id="confirmPassword">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

2. 修正jQuery Ajax代码 #

• 匹配实体类的字段名：将name改为firstName，新增lastName字段
• 增加密码确认校验（可选但建议）

$("#signup-form").submit(function (event) {
    event.preventDefault();

    const password = $("#password").val();
    const confirmPassword = $("#confirmPassword").val();
    
    // 密码确认校验
    if (password !== confirmPassword) {
        alert("Passwords do not match!");
        return;
    }

    var user = {
        firstName: $("#firstName").val(),
        lastName: $("#lastName").val(),
        email: $("#email").val(),
        password: $("#password").val(),
        role: "USER" // 设置默认角色，避免字段为空
    };

    $.ajax({
        type: "POST",
        url: "http://localhost:8080/users",
        contentType: "application/json",
        data: JSON.stringify(user),
        success: function (data) {
            console.log("User created successfully", data);
            alert("Registration successful!");
            $("#signup-form")[0].reset(); // 重置表单
        },
        error: function (error) {
            console.error("Error creating user", error);
            alert("Registration failed, please try again.");
        }
    });
});

3. 可选：后端默认角色优化（避免字段为空） #

在UsersService的createUser方法里给用户设置默认角色，防止前端未传值导致数据库字段为空：

public Users createUser(Users user) {
    // 如果角色为空，设置默认值
    if (user.getRole() == null || user.getRole().isEmpty()) {
        user.setRole("USER");
    }
    return userRepo.save(user);
}

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