jQuery 方法无法将数据传递到 REST 服务器答案

【问题标题】：jQuery method can not deliver data to REST serverjQuery 方法无法将数据传递到 REST 服务器
【发布时间】：2019-03-31 07:49:43
【问题描述】：

这些代码是关于向 Spring Boot 的 RESTful Server 传递数据的 jQuery JavaScript。首先，以下代码是 Rest Controller 源代码。

@RestController
@RequestMapping(value="/rest/user")
public class UserRestController {

    @Autowired
    private UserService userService;

    @PostMapping("login")
    public ResponseEntity<Boolean> authenticated(@RequestBody User user) {

        System.out.println(user.getUsername() + user.getPassword()); // return values are NULL

        Boolean blogin = userService.authenticate(user.getUsername(), user.getPassword());
        if(!blogin)
            return new ResponseEntity<Boolean>(blogin, HttpStatus.NOT_ACCEPTABLE);

        return new ResponseEntity<Boolean>(blogin, HttpStatus.OK);
    }
}

还有 jQuery JavaScript 代码。

== index.html ==

<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/ajaxlogin.js"></script>
</head>
<body>
    <h1>Please sign in</h1>
    <form method="post" id="loginForm" th:object="${loginForm}">
        <div><label for="username">username</label></div>
        <input id="username" type="text" name="username" th:value="*{username}"/>

        <div><label for="password" th:value="*{username}">password</label></div>
        <input id="password" type="password" name="password" th:value="*{password}" />

        <div>
            <input type="submit" value="Login" />
            <a href="index.html" th:href="@{/posts}">Cancel</a>
        </div>
    </form>
    <div id=helloUserDiv></div>
</body>
</html>

== ajaxlogin.js ==

$(document).ready(function () {

    $("#loginForm").submit(function (event) {

        //stop submit the form, we will post it manually.
        event.preventDefault();
        ajax_login_submit();
    });
});

function ajax_login_submit() {

    var user = {
        username : $("#username").val,
        password : $("#password").val
    }

    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "rest/user/login/",
        data: JSON.stringify(user),
        dataType: 'json',
        cache: false,
        timeout: 600000,
        success: function (data) {

            var resultJson = JSON.stringify(data);
            $('#helloUserDiv').html(resultJson);
            console.log("SUCCESS : ", data);
            alert(data);

        },
        error: function (e) {

            var resultJson = e.responseText;
            $('#helloUserDiv').html(resultJson);
            console.log("ERROR : ", e);
        }
    });
}

但是结果失败了。错误代码 406。我不确定这些代码上的错误是什么。

更新

我像下面这样修改了 JavaScript，

function ajax_login_submit() {

    var user = {
            username: $("#username").val(),
            password: $("#password").val()
        };

    console.log(user.username);
    console.log(user.password);
    console.log(user);

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "rest/user/login",
        data: JSON.stringify(user),
        //dataType: 'json',
        success: function (data) {

            var resultJson = JSON.stringify(data);
            $('#helloUserDiv').html(resultJson);
            console.log("SUCCESS : ", data);
            alert(data);

        },
        error: function (e) {

            var resultJson = e.responseText;
            $('#helloUserDiv').html(resultJson);
            console.log("ERROR : ", e);
        }
    });
}

console.log(user) 返回以下正确的值，

{用户名：“约瑟夫”，密码：“密码”}

但是 RestController 带来了一些问题。

@RestController
@RequestMapping(value="/rest/user")
public class UserRestController {

    @Autowired
    private UserService userService;

    @PostMapping("login")
    public ResponseEntity<Boolean> authenticated(@RequestBody User user) {

        System.out.println(user.getUsername() + user.getPassword()); // return values are "josephnull"

        Boolean blogin = userService.authenticate(user.getUsername(), user.getPassword());

System.out.println(user.getUsername() + user.getPassword()); 此行返回“josephnull”，即我的意思是密码值为空。我不明白为什么密码值为空。

【问题讨论】：

为什么要对发送的数据进行字符串化处理？
data: user,是怎么发送的

标签： javascript jquery spring-restcontroller

【解决方案1】：

错误代码406 表示数据不可接受。以下是详细信息。 Error code 406 details. 从您的代码中删除dataType: 'json'，它将起作用。有了这行代码，一旦我删除它，代码就会抛出parse error，错误消失并且响应成功。

这是工作代码，忽略url，因为我使用了我的。

$.ajax({
        type: "POST",
        contentType: "application/json",
        url: "hms/raw/login",
        data: JSON.stringify(user),

        cache: false,
        timeout: 600000,
        success: function (data) {

            var resultJson = JSON.stringify(data);
            $('#helloUserDiv').html(resultJson);
            console.log("SUCCESS : ", data);
            alert(data);

        },
        error: function (e) {

            var resultJson = e.responseText;
            $('#helloUserDiv').html(resultJson);
            console.log("ERROR : ", e);
            console.log(JSON.stringify(e));
        }
    });

【讨论】：

嗨，@Shahzeb 请检查我更新的部分好吗？
它对我来说很好用。无法重现该问题。

【解决方案2】：

在你的 jquery $.ajax 调用中尝试放置

data: {user :JSON.stringify(user)}, 而不是 data: JSON.stringify(user) , 或data: {user : user}, 根据您的需要那么代码将是：

function ajax_login_submit() {

        var user = {
            username : $("#username").val,
            password : $("#password").val
        }

        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "rest/user/login/",
            data: data: {user :JSON.stringify(user)},
            dataType: 'json',
            cache: false,
            timeout: 600000,
            success: function (data) {

                var resultJson = JSON.stringify(data);
                $('#helloUserDiv').html(resultJson);
                console.log("SUCCESS : ", data);
                alert(data);

            },
            error: function (e) {

                var resultJson = e.responseText;
                $('#helloUserDiv').html(resultJson);
                console.log("ERROR : ", e);
            }
        });
    }

【讨论】：

【解决方案3】：

您可以使用 FormData() 来发布数据，例如：

var data = new FormData();
data.set('key', 'value');

如果你想发送图片然后

data.append('image', imageFile);

然后设置 header headers: {'Content-Type': 'multipart/form-data' 并在没有 stringify 的情况下发送。

应该是这样的：

$.ajax({
     type: "POST",
     contentType: "multipart/form-data",
     url: "to/url",
     data: data,
     success: function (data) {
         alert(data);
     }
});

【讨论】：