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

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) {
    // ...
}