Not able to send JSON data from ajax call to MVC controller

Question

I am trying to capture data from one HTML form and send it to MVC controller but the below code doesn't work. Can someone please help me here.

var form = JSON.stringify(jQuery('#project_form').serializeArray());
    $.ajax({
    contentType : "application/json; charset=utf-8",
    dataType : "json",
    type: "POST",
    url: "/SE/doLogin",
    data: form,
    success: function(response){
    window.location.href = response;

And here is my controller

@RequestMapping(value = "/doLogin",method = RequestMethod.POST,consumes = "application/json",produces="text/plain")
@ResponseBody
public String sayHello(@RequestBody TestDao templateModel ){
    System.out.println("say");
    System.out.println(templateModel.getEmail());
    TestMethod t1 = new TestMethod();
            t1.getValues();
    return "newsFeed";

}

When I am not keeping any argument , it works and S.o.p is getting printed on console. I am not sure while @RequestBody is not working.

@starcorn Thanks for pointing out the Json data format. I think there is an issue with that. After var form = JSON.stringify(jQuery('#project_form').serializeArray()); I am getting Json as below . [{"name":"email","value":"kala"},{"name":"password","value":"kala"}] Any idea how can we fix this ? — Roshi Zr, Apr 03 '16 at 00:27

score 0 · Answer 1 · answered Apr 03 '16 at 03:01

You can define a Model object to map your json object.

@RequestMapping(value = "/doLogin",method = RequestMethod.POST,consumes = "application/json",produces="text/plain")
@ResponseBody
    public String sayHello(@ModelAttribute TemplateModel templateModel ){
        System.out.println("say");
        System.out.println(templateModel.getEmail());
        TestMethod t1 = new TestMethod();
                t1.getValues();
        return "newsFeed";

    }

// This bean should map your json object.
public class TemplateModel{
       private String email;
       private String values;
    }

score 0 · Answer 2 · answered Apr 03 '16 at 03:47

Your form serialization can only produce key-value pair. So you cannot actually consume an object in the MVC controller.

There are two ways to get it working:

Accept a map of name-value instead of TestDao object.
Write a function in Javascript which converts your form's name-value to a object of the form TestDao

score 0 · Answer 3 · edited May 23 '17 at 10:28

Use a jquery object serialization extension to create javascript object from form. Then send it to controller as JSON. Collected from here

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

use it like

var form = JSON.stringify(jQuery('#project_form').serializeObject());
    $.ajax({
    contentType : "application/json; charset=utf-8",
    dataType : "json",
    type: "POST",
    url: "/SE/doLogin",
    data: form,
    success: function(response){
    window.location.href = response;

hope this helps.

score 0 · Answer 4 · answered Aug 03 '16 at 09:17

Please make sure that you have Jakson jars in your dependency library. If you are using spring 4 ,framework will automatically pickup the content negotiator as JSON and will find for the Jakson jars in the background to transport JSON to server and get JSON data back from server

use JAXB jars , in case you need to handle XML as content negotiator.

Not able to send JSON data from ajax call to MVC controller

4 Answers4