SpringBoot+JavaScript登录失败无提示问题及需求实现

后端代码修正（Auth类） #

你的代码存在路径不匹配、请求参数注解冲突、重定向逻辑不适合AJAX请求、响应格式错误等核心问题，修改后的代码如下：

@Controller
@CrossOrigin("http://localhost:4200")
public class Auth {

    @GetMapping("/login")
    public String login(){
        return "loginPage.html";
    }

    // 修正路径为/doLogin，与前端请求一致；添加@ResponseBody返回JSON格式响应
    @PostMapping("/doLogin")
    @ResponseBody
    public Boolean doLogin(HttpServletRequest httpRequest, @RequestParam String nickname, @RequestParam String password){
        System.out.println(nickname);
        System.out.println(password);

        User user = DBManager.getInstance().getUserDao().findByPrimaryKey(nickname);
        if(user != null) {
            httpRequest.getSession().setAttribute("User", user);
            // AJAX请求下后端重定向无法触发浏览器跳转，直接返回true让前端处理跳转
            return true;
        }
        return false;
    }

    @GetMapping("/register")
    public String register() {
        return "registerPage.html";
    }

    @PostMapping("/register")
    public void doRegister(@RequestParam String nickname){
        System.out.println(nickname );
    }
}

关键修改说明 #

1. 路径匹配：将@PostMapping("/login")改为@PostMapping("/doLogin")，和前端AJAX请求的URL保持一致。
2. 移除@RequestBody：前端用form data格式传参，@RequestBody用于接收JSON请求体，两者冲突必须移除。
3. 添加@ResponseBody：让Spring将返回的布尔值序列化为JSON格式，避免被当成视图名查找页面，解决“不支持布尔值作为响应”的错误。
4. 移除重定向逻辑：AJAX是异步请求，后端sendRedirect的响应会被AJAX接收，无法触发浏览器跳转，改为返回true让前端自行处理跳转。

如果需要更灵活的响应（比如返回自定义错误消息），可以封装一个响应类：

// 新增登录响应类
class LoginResponse {
    private boolean success;
    private String message;

    // 构造方法
    public LoginResponse(boolean success, String message) {
        this.success = success;
        this.message = message;
    }

    // getter和setter省略
}

// 修改doLogin方法返回值
@PostMapping("/doLogin")
@ResponseBody
public LoginResponse doLogin(HttpServletRequest httpRequest, @RequestParam String nickname, @RequestParam String password){
    User user = DBManager.getInstance().getUserDao().findByPrimaryKey(nickname);
    if(user != null) {
        httpRequest.getSession().setAttribute("User", user);
        return new LoginResponse(true, "登录成功");
    }
    return new LoginResponse(false, "用户名或密码错误");
}

前端JavaScript修正 #

前端存在输入框取值错误、未处理响应结果的问题，修改后的代码如下：

window.onload = function(){
  const button = document.getElementById("submitButton");
  const nickname = document.getElementById('nicknameInput');
  const password = document.getElementById('passwordInput');

  button.addEventListener("click", function(event){
    $.ajax({
      method: 'POST',
      url: 'http://localhost:8080/doLogin',
      // 修正取值为value，输入框内容需通过value属性获取，nodeValue用于获取节点文本
      data: {'nickname': nickname.value, 'password': password.value},
      success: function(response){
        // 布尔值响应的处理逻辑
        if(response){
          // 登录成功跳转到Angular首页
          window.location.href = 'http://localhost:4200/';
        } else {
          // 登录失败弹窗提示
          alert('登录失败，用户名或密码错误');
        }

        // 如果使用封装的LoginResponse对象，替换为以下逻辑
        // if(response.success){
        //   window.location.href = 'http://localhost:4200/';
        // } else {
        //   alert(response.message);
        // }
      },
      // 添加错误回调，捕获网络请求失败等异常情况
      error: function(){
        alert('请求失败，请稍后重试');
      }
    });
    event.preventDefault();
  });
}

关键修改说明 #

1. 修正输入框取值：将nickname.nodeValue改为nickname.value，nodeValue用于获取DOM节点的文本内容，输入框的用户输入需通过value属性获取。
2. 处理响应结果：在success回调中根据后端返回的结果判断登录状态，成功则跳转页面，失败则弹窗提示。
3. 添加错误回调：捕获请求过程中的异常（如网络问题、后端报错），给用户明确反馈。

最终效果 #

• 登录成功：前端AJAX收到true（或success为true的响应），自动跳转到http://localhost:4200/。
• 登录失败：前端弹出提示弹窗，告知用户登录错误。

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