javascript - 使用 JQuery 向 REST API 提交 From 不起作用

Question

我正在运行一个 REST API，并且我正在使用 JQuery 向其中发布一些数据。

这就是我的 JQuery 代码的样子:

$(document).ready(function () {

    $('#login-form').submit(function () {

        var user = $('#uname').val();
        var pass = $('#pwd').val();

        alert('username = ' + user);
        alert('password = ' + pass);

        var JSONObject = { 'userName': user, 'password': pass };
        var jsonData = JSON.parse(JSONObject);

        $.ajax({
            url: 'http://127.0.0.1:8080/user/login',
            method: 'POST',
            data: { userName: user, password: pass },
            dataType: 'JSON',
            contentType: 'application/json',
            success: function (data, status, jqXHR) {
                //Do something
                console.log('data = ' + data);

            },
            error: function (jqXHR, status, errorThrown) {
                alert('error ' + errorThrown);

            }
        });

    });

});

但是，此代码无法访问 API。我没有在服务器日志中收到预期的消息。单击表单的“提交”按钮后，浏览器将重新加载，并在 url 中显示表单输入。仅此而已。

我的API是使用Java编写的，这是相关的方法。

@RequestMapping(value = "/user/login", method = RequestMethod.POST)
    public ResponseEntity<User> logUser(@RequestBody User user){

        User loggedUser = loginService.authenticateUser(user);

        if(loggedUser != null){
            System.out.println("User found");
            return new ResponseEntity<User>(loggedUser, HttpStatus.ACCEPTED);
        }else{
            //user does not exsits
            System.out.println("User not found");
            return new ResponseEntity<>(HttpStatus.NO_CONTENT);
        }

    }

我真的不明白哪里出了问题。没有显示任何错误。有人可以指出为什么会发生这种情况以及如何解决此问题。

Answer 1

问题是浏览器在提交事件时重新加载。您需要像这样添加 PreventDefault() 方法

$("#login-form").submit(function (event) {
      event.preventDefault()
      //further code here

这将阻止浏览器重新加载