How to send a post request to the Spring controller using ajax - html

Question

I want to send a post request to the spring controller using ajax. But it doesn't work. I would be grateful if anyone could tell me, what I have done worngly.
$("#myprofile").on('submit',function(e){
console.log("in changes ave"+ $("#firstname").val());
console.log("in changes ave"+ $("#lastname").val());
console.log("in changes ave"+ $("#current_password").val());
console.log("in changes ave"+ $("#new_password").val());
var myJSON = JSON.stringify({
"firstname" : $("#firstname").val(),
"lastname" : $("#lastname").val(),
"current_password" : $("#current_password").val() ,
"new_password" : $("#new_password").val()
});
$.ajax({
type : "POST",
url : "/edit_profile",
dataType:"json",
contentType: "application/json",
data : myJSON,
success : function(mydataa) {
console.log("Successful")
},
error: function(dataa){
alert(dataa.responseText)
}
});
})
Here is my controller:
#ResponseBody
#RequestMapping(value = "/edit_profile", method = RequestMethod.POST, consumes = "application/json")
public ModelAndView editProfile(#RequestParam("firstname") String firstname,
#RequestParam("lastname") String lastname, #RequestParam("new_password") String new_password,
#RequestParam("current_password") String current_password) {
ModelAndView modelAndView = new ModelAndView();
//some logic here
user = profileRepository.changeUserInformation(user, firstname, lastname, new_password, current_password);
}
modelAndView.setViewName("profile");
return modelAndView;
}
And here is my html page:
<form class="col" id="myprofile">
<input type="text" class="form-control border-0" name="firstname" id="firstname" th:value="${currentUser.firstname}">
<input type="text" class="form-control border-0" name="lastname" id="lastname"
th:value="${currentUser.lastname}">
<input type="password" class="form-control border-0" placeholder="current password" name="current_password" id="current_password">
<input type="password" class="form-control border-0" placeholder="new password" name="new_password" id="new_password">
<input type="password" class="form-control border-0" name="confirm_password"
id="confirm_password" placeholder="confirm new password">
<button id = "changesave-btn" type="submit" class="save button-2">SAVE CHANGES</button>
</form>
I get Error 400 Bad request as the message returned from the alert line and I see this output in my console:
Required String parameter 'firstname' is not present
Thanks in advance,

Answer 1

Since you send a JSON payload, there is no request parameter.
Create a POJO to store the Ajax POST data.
public class MyProfile {
private String firstname;
private String lastname;
private String new_password;
private String current_password;
public MyProfile() {
}
// getter/setter ..
}
Accept the Ajax POST data with #RequestBody
#ResponseBody
#RequestMapping(value = "/edit_profile", method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE)
public ModelAndView editProfile(#RequestBody MyProfile myProfile) {
// ...
}