#jquery #ajax #spring #thymeleaf
#jquery #ajax #весна #thymeleaf
Вопрос:
Мне нужна помощь, я хочу сделать запрос jquery ajax для получения некоторых данных, а затем сохранить их в контроллере. Я получаю поля правильно, но когда я нажимаю кнопку, ничего не происходит.
Failed to load resource: the server responded with a status of 405 ()
add:1 Uncaught SyntaxError: Unexpected end of JSON input
at Function.parse [as parseJSON] (<anonymous>)
at Object.error (add:190)
at i (jquery.min.js:2)
at Object.fireWith [as rejectWith] (jquery.min.js:2)
at A (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.thymeleaf.org ">
<head>
<div th:replace="fragments/header :: header"></div>
</head>
<body>
<nav th:replace="layouts :: foo"></nav>
<div class="container my-5">
<h3>Adauga masini :</h3>
<div class="card">
<div class="card-body">
<div class="col-md-10">
<div class="row">
<div class="form-group col-md-8">
<legend>
<label for="model" class="col-form-label">Model</label> <input type="text"
class="form-control"
id="model"
placeholder="Model"
required>
</legend>
</div>
<div class="form-group col-md-8">
<legend>
<label for="year" class="col-form-label">An fabricatie :</label>
</legend>
<select name="year" id="year">
</select>
</div>
<div class="form-group col-md-8">
<legend>
<label class="col-form-label">Combustibil :</label><br>
</legend>
<input type="radio" name="fuel" value="benzina gpl"
required> benzina gpl<br>
<input type="radio" name="fuel" value="motorina gpl"
required> motorina gpl<br>
<input type="radio" name="fuel" value="motorina"
required> motorina<br>
<input type="radio" name="fuel" value="benzina"
required> benzina
</div>
<div class="form-group col-md-8">
<legend>
<label for="seats" class="col-form-label">Numar locuri :</label>
</legend>
<select name="seats" id="seats">
<option value="two">2</option>
<option value="four">4</option>
<option value="six">6</option>
<option value="eight">8</option>
</select>
</div>
<div class="form-group col-md-8">
<legend>
<label for="color" class="col-form-label">Culoare :</label> <input type="text"
class="form-control"
id="color"
placeholder="Color"
required>
</legend>
</div>
<div class="form-group col-md-8">
<legend>
<label class="col-form-label">Cutie viteze :</label><br>
</legend>
<input type="radio" name="gear"
value="automat" required> automata<br>
<input type="radio" name="gear"
value="manual" required> manuala<br>
</div>
<div class="form-group col-md-8">
<legend>
<label for="price" class="col-form-label">Pret :</label></legend>
<input type="text"
class="form-control"
id="price"
placeholder="Price"
required>
<select id="coin">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
<option value="LEI">LEI</option>
</select>
</div>
</div>
<div class="col-md-6">
<button onclick ="addCar()" class="btn btn-primary" >Add car</button>
</div>
<div class="form-group col-md-8"></div>
<div class="form-group col-md-8">
<a class="btn btn-primary" href="/cars/list">Back</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type ="text/javascript">
function addCar() {
let model = document.getElementById('model').value;
console.log(model);
let year = document.getElementById('year').value;
console.log(year);
let fuel = $("input[name='fuel']:checked").val();
console.log(fuel);
let seats = document.getElementById('seats').value;
console.log(seats);
let color = document.getElementById('color').value;
console.log(color);
let gear = $("input[name='gear']:checked").val();
console.log(gear);
let price = document.getElementById('price').value;
console.log(price);
let coin = document.getElementById('coin').value;
console.log(coin);
$.ajax({
type: "POST",
data: { model: model , year: year , fuel: fuel , seats: seats, color: color , gear: gear, price: price, coin: coin },
url: "/cars/add",
success: function(result) {
window.location.href = '/cars/list';
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
var response = $.parseJSON(XMLHttpRequest.responseText);
var errMessage = response["message"];
alert(errMessage);
}
});
}
</script>
<script>
var start = 1900;
var end = new Date().getFullYear();
var options = "";
for(var year = start ; year <=end; year ){
options = "<option>" year "</option>";
}
document.getElementById("year").innerHTML = options;
</script>
</body>
</html>
Контроллер:
@PostMapping(value = "/cars/add")
public @ResponseBody String addCars(Cars car,
@RequestParam("model") String model,
@RequestParam("year") int year,
@RequestParam("fuel") String fuel,
@RequestParam("seats") int seats,
@RequestParam("color") String color,
@RequestParam("gear") String gear,
@RequestParam("price") int price,
@RequestParam("coin") String coin) {
System.out.println(model);
System.out.println(year);
car.setModel(model);
car.setYear(year);
car.setFuel(fuel);
car.setSeats(seats);
car.setColor(color);
car.setGearBox(gear);
car.setPrice(price);
car.setCoin(coin);
return "redirect:/cars/list";
}``
Я хочу сохранить эти данные об автомобиле в базе данных и перенаправить на страницу, где у меня есть список с этими автомобилями
Комментарии:
1. afaik, вам нужно сообщить конечным точкам spring тип данных, который потребляет и который он производит, и я не думаю, что JSON используется по умолчанию. итак, что-то вроде
@PostMapping(path = "/myPath", consumes = "application/json", produces = "application/json")PS. это означает, что вам не нужен 1 RequestParam для каждой пары ключ -значение … вам нужен только один, и обычно вы хотите преобразовать его в какой-либо объект ()@RequestBody Car car2. И как я могу это сделать? Я не понимаю, как использовать только один параметр запроса
3. Привет, у меня уже есть форма для загрузки фотографий, и мне нужен запрос Ajax для этих полей