How to pass FormData and JSON object in ajax to Spring MVC Controller?

Question

I need to pass both FormData and JSON object in an ajax call, but I get a 400 Bad Request error.

[artifact:mvn]  org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver - Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: Could not read document: Unexpected character ('-' (code 45)) in numeric value: expected digit (0-9) to follow minus sign, for valid numeric value
[artifact:mvn]  at [Source: java.io.PushbackInputStream@3c0d58f6; line: 1, column: 3]; nested exception is com.fasterxml.jackson.core.JsonParseException: Unexpected character ('-' (code 45)) in numeric value: expected digit (0-9) to follow minus sign, for valid numeric value
[artifact:mvn]  at [Source: java.io.PushbackInputStream@3c0d58f6; line: 1, column: 3]

JS:

var formData = new FormData(form[0]);
//form JSON object
var jsonData = JSON.stringify(jcArray);
$.ajax({
        type: "POST",
        url: postDataUrl,
        data: { formData:formData,jsonData:jsonData },
        processData: false,
        contentType: false,
        async: false,
        cache: false,
        headers: { 
            'Accept': 'application/json',
            'Content-Type': 'application/json' 
        },
        success: function(data, textStatus, jqXHR) {
        }
});

Controller:

@RequestMapping(value="/processSaveItem",method = RequestMethod.POST")
public @ResponseBody Map<String,String> processSaveItem(
                                  @RequestBody XYZClass result[])

}

There is similar question, jquery sending form data and a json object in an ajax call and I'm trying the same way.

How can I send both FormData and JSON object in a single ajax request?

score 0 · Answer 1 · answered Jul 27 '16 at 14:33

You can pass in this way

   postdata={};
   postdata.formData=formData;
   postData.jsonData=jsonData
 $.ajax({
    type: "POST",
    url: postDataUrl,
    data: { postdata},
    processData: false,
    contentType: false,
    async: false,
    cache: false,
    headers: { 
        'Accept': 'application/json',
        'Content-Type': 'application/json' 
    },
    success: function(data, textStatus, jqXHR) {
    }

});

and controller side you can identify the data.

score 0 · Accepted Answer · edited May 23 '17 at 12:02

I solved it by appending the JSON string with FormData object in ajax POST.

var jsonObjectData = JSON.stringify(jcArray);
formData.append("jsonObjectData",jsonObjectData);

and in controller you can access it the normal way as you do for other form data values.

request.getParameter("jsonObjectData");

and now you'll be having the Stringified JSON and you can parse the json to Java object

How to parse a JSON string to an array using Jackson.

score 0 · Answer 3 · edited May 10 '17 at 05:27

0

You can do the following to pass form data in Ajax call.

var formData = $('#client-form').serialize();
$.ajax({
    url: 'www.xyz.com/index.php?' + formData,
    type: 'POST',
    data:{
    },
    success: function(data){},
    error: function(data){},
})

edited May 10 '17 at 05:27

answered May 10 '17 at 05:09

Bhushan

595
3
9

lol. This is not what I wanted. How does this answer my question and Where is the json data in your answer? – Lucky May 10 '17 at 06:53
In data section you can pass json object with reference and form data is being appended in URL section. For example, data:{jsonObject: JsonObject }, – Bhushan May 11 '17 at 10:36
You didn't understand my question properly. I need to send both json object and formData together. Your response implies that you are sending only one of them. – Lucky May 22 '17 at 13:01
Here I am sending my form data also. I am passing my form data in Url. – Bhushan Jun 02 '17 at 16:25

How to pass FormData and JSON object in ajax to Spring MVC Controller?

3 Answers3