Sending data to spring controller using AJAX

Question

I know that this question has been asked many times, but I have looked at every variation I could find and have still not been able to find out my issue.

Here is my ajax call:

function sendFormData(endpoint) {
    console.log("CLICKING BUTTON");

    var input = {
            "userInputOne": "hello1", 
            "userInputTwo": "hello2", 
            "userInputThree": "hello3", 
            "userInputFour": "hello4", 
            "userInputFive": "hello5"
    }

    $.ajax({
        type:"post",
        contentType: "application/json",
        data: JSON.stringify(input),
        url: endpoint,
        asynch: false,
        success: function() {
            alert("success");
        } 

    });

}

The endpoint works. You can take my word for it.

Spring controller:

@RequestMapping(value = "endpoint", method = RequestMethod.POST)
        private @ResponseBody String getFormData(@RequestBody FormInput userInput, HttpServletRequest request, final ModelMap model) {

        String userInput1 = userInput.getInputOne();
        String userInput2 =  userInput.getInputTwo();
        String userInput3 = userInput.getInputThree();;
        String userInput4 = userInput.getInputFour();
        String userInput5 = userInput.getInputFive();

        return "success";

    }

And here is my model class:

public class FormInput {
    private String userInputOne;
    private String userInputTwo;
    private String userInputThree;
    private String userInputFour;
    private String userInputFive;

    public FormInput(String userInputOne, String userInputTwo, String userInputThree, String userInputFour, String userInputFive) {
        this.userInputOne = userInputOne;
        this.userInputTwo = userInputTwo;
        this.userInputThree = userInputThree;
        this.userInputFour = userInputFour;
        this.userInputFive = userInputFive;
    }

    public String getUserInputOne() {
        return this.userInputOne;
    }

    public String getUserInputTwo() {
        return this.userInputTwo;
    }

    public String getUserInputThree() {
        return this.userInputThree;
    }

    public String getUserInputFour() {
        return this.userInputFour;
    }

    public String getUserInputFive() {
        return this.userInputFive;
    }

}

I keep getting a HTTP status code of 415, which means unsupported media type. I set the contentType to "application/json", and I also tried to add "consumes= 'application/json'" to my Spring controller and that didn't help either. Thank you for any help you can give.

EDIT: I am now getting the following error after changing RequestMethod.GET to RequestMethod.POST: "Error 405: Request method 'GET' not supported"

try this dataType: "json", contentType: "application/json; charset=utf-8", — pvpkiran
– pvpkiran, Commented Jul 30, 2018 at 14:15
Have you tried sending data as JSON object instead of string. data: input? — Madhan Varadhodiyil
– Madhan Varadhodiyil, Commented Jul 30, 2018 at 14:16
I think, ajax is trying for GET request though you mentioned as POST. Can you add screen shot of Network tab of Chrome developer tool? If it showing POST request, it would be really great if you put your code into some public repository, so I can check. — Shaunak Patel
– Shaunak Patel, Commented Jul 30, 2018 at 14:47

flyingfox · Accepted Answer · 2018-07-30 15:16:11Z

There is no need to send parameter as json,you have made things complicated

In javascript code,you can remove contentType: "application/json", and change the format of data property to send data directly

function sendFormData(endpoint) {
    console.log("CLICKING BUTTON");

    var input = {
            "userInputOne": "hello1", 
            "userInputTwo": "hello2", 
            "userInputThree": "hello3", 
            "userInputFour": "hello4", 
            "userInputFive": "hello5"
    }

    $.ajax({
        type:"post",
        //contentType: "application/json",
        data: input,//send data directly
        url: endpoint,
        asynch: false,
        success: function() {
            alert("success");
        } 

    });

}

In java code,you can remove @ResponseBody annotation before FormInput

@RequestMapping(value = "endpoint", method = RequestMethod.POST)
private @ResponseBody String getFormData(FormInput userInput, HttpServletRequest request, final ModelMap model) {

        String userInput1 = userInput.getInputOne();
        String userInput2 =  userInput.getInputTwo();
        String userInput3 = userInput.getInputThree();;
        String userInput4 = userInput.getInputFour();
        String userInput5 = userInput.getInputFive();

        return "success";

}

Vaibhav Singh · Accepted Answer · 2018-07-30 14:19:52Z

0

The java controller method you have written is of type 'GET', it should be changed to 'POST', as the ajax call you are making is also of type POST Try this and it will work

@RequestMapping(value = "endpoint", method = RequestMethod.POST)
            private @ResponseBody String getFormData(@RequestBody FormInput userInput, HttpServletRequest request, final ModelMap model) {

            String userInput1 = userInput.getInputOne();
            String userInput2 =  userInput.getInputTwo();
            String userInput3 = userInput.getInputThree();;
            String userInput4 = userInput.getInputFour();
            String userInput5 = userInput.getInputFive();

            return "success";

        }

answered Jul 30, 2018 at 14:19

Vaibhav Singh

19710 bronze badges

3 Comments

Logan Phillips Over a year ago

Getting the following error: "Error 405: Request method 'GET' not supported"

Vaibhav Singh Over a year ago

just try changing type:"post" to type: "POST". and share the result and java controller method to 'POST' as well

Logan Phillips Over a year ago

Edited my question to reflect the changes.

Myroslav Tustanovskyy · Accepted Answer · 2018-07-30 14:21:18Z

0

I guess main problem in not match http methods. You sent by POST method, but controller wait for GET method.

answered Jul 30, 2018 at 14:21

Myroslav Tustanovskyy

13 bronze badges

2 Comments

Logan Phillips Over a year ago

I tried that initially but got the following error: "Error 405: Request method 'GET' not supported"

Myroslav Tustanovskyy Over a year ago

Rewtite in your controller: method = RequestMethod.POST

Alien · Accepted Answer · 2018-07-30 17:02:49Z

0

This is because your method signature doesn't match. Just remove contentType: "application/json".

answered Jul 30, 2018 at 17:02

Alien

16k8 gold badges43 silver badges64 bronze badges

Collectives™ on Stack Overflow

Sending data to spring controller using AJAX

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related