Passing an ID and String array to Spring MVC via jQuery/ajax+JSON

Question

I need to POST a request via jQuery.ajax() to a Spring MVC controller URL mapped method and receive a response; both request and response data is in JSON format.

Ajax call would be something like this:

$.ajax({
    url: "/panelsData",
    dataType: "json",
    data: { "id": 1, "panels": [ "View1", "View2", "View3" ] },
    success: function(data) {...}
});

Spring MVC controller URL mapped method:

@RequestMapping(value="/panelsData", method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE,
        consumes = MediaType.APPLICATION_JSON_VALUE)
@ResponseStatus(value=HttpStatus.OK)
@ResponseBody
public List<PanelData> getPanelsDataById(
         @RequestParam("id") BigDecimal id,
         @RequestParam("panels") List<String> panelsList) {

    // Process list of Strings corresponding to panel view names
    // and return a list of PanelData objects (in JSON format).
}

The first problem I faced was that the client (browser) failed with error code 400 (Bad Request). So, I JSON.stringify'ed the array in the ajax call:

data: { "id": 1, "panels": JSON.stringify([ "View1", "View2", "View3" ]) },

This time, the request was successfully received by Spring MVC. But something was amiss with the list of String values. When I examined the values, here's what I saw:

panelsList[0] = ""[View1""
panelsList[1] = ""View2""
panelsList[2] = ""View3]""

What?! I was expecting these values:

panelsList[0] = "View1"
panelsList[1] = "View2"
panelsList[2] = "View3"

Am I incorrectly serializing (or de-serializing) the values? Given that the exchange of data must all be JSON, and that I am using the Jackson library, I was expecting that receiving an ID and a list of String values from the client in JSON should not be all that difficult. I know the Jackson library configuration is perfect, because the JSON responses returned by the other methods are correctly formed.

You have to understand the first and the very important thing if you are passing a data from json, you have the same type and patterns of data....like as here I'm creating method signature on basis of json data public PanelData getPanelsDataById( @RequestParam("id") BigDecimal id, @RequestParam("panels") List<String> panelsList) — Sam
– Sam, Commented Nov 14, 2014 at 20:20

dReAmEr · Accepted Answer · 2014-11-14 20:45:12Z

3

I think it would be better if you can restructure your code something like below.

rather than passing/receiving them in separate argument,you can create PanelDataJson class,which contains both id and list of panel.

class PanelDataJson{
    BigDecimal id;
    List<String> panelsList;

     //Getter and Setter

}

And then change your method like below.

@RequestMapping(value="/panelsData", method = RequestMethod.POST,
        produces = MediaType.APPLICATION_JSON_VALUE,
        consumes = MediaType.APPLICATION_JSON_VALUE)
@ResponseStatus(value=HttpStatus.OK)
@ResponseBody
public List<PanelData> getPanelsDataById(
         @RequestBody PanelDataJson) {

    // Process list of Strings corresponding to panel view names
    // and return a list of PanelData objects (in JSON format).
}

And from your front end,just stringify your whole data,not partially.

$.ajax({
    url: "/panelsData",
    dataType: "json",
    data: JSON.stringify({ "id": 1, "panels": [ "View1", "View2", "View3" ] }),
    type: "POST",
    contentType : 'application/json; charset=utf-8',
    success: function(data) {...}
});

answered Nov 14, 2014 at 20:45

dReAmEr

7,2047 gold badges40 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Web User Over a year ago

If I absolutely did not want to create a new class, the following also worked for me - to the Ajax call's options, add traditional: true and for the data option, data: $.param({ "id": 1, "panels": [ "View1", "View2", "View3" ] }, true).

swapyonubuntu Over a year ago

Very helpful @WebUser , Thanks a lot for this approach as well as question. I wanted to ask one thing, is setting "traditional:true" , harmful or insecure?

Collectives™ on Stack Overflow

Passing an ID and String array to Spring MVC via jQuery/ajax+JSON

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related