#javascript #jquery #spring-restcontroller
#javascript #jquery #spring-restcontroller
Вопрос:
Эти коды относятся к jQuery JavaScript, которые доставляют данные на RESTful сервер Spring Boot. Во-первых, приведенные ниже коды являются источниками контроллера Rest.
@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) возвращает следующие значения, которые являются правильными,
{имя пользователя: «joseph», пароль: «password»}
Но 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», т.е. я имею в виду, что значение пароля равно нулю. Я не могу понять, почему значение пароля равно null.
Комментарии:
1. почему вы упорядочиваете отправленные данные?
2.
data: user,как это отправить
Ответ №1:
Код ошибки 406 означает, что данные неприемлемы. Вот подробности. Код ошибки 406 подробнее. Удалите 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));
}
});
Комментарии:
1. Привет, @Shahzeb, не мог бы ты проверить мою обновленную Часть, пожалуйста?
2. У меня все работает нормально. Не удалось воспроизвести проблему.
Ответ №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);
Затем установите заголовок headers: {'Content-Type': 'multipart/form-data' и отправьте его без stringify.
Это должно выглядеть следующим образом:
$.ajax({
type: "POST",
contentType: "multipart/form-data",
url: "to/url",
data: data,
success: function (data) {
alert(data);
}
});