Pass array data from javascript in browser to spring mvc controller using ajax

Question

I would like to pass an array from javascript in web browser to a Spring MVC controller using AJAX

In javascript, I have

var a = [];
a[0] = 1;
a[1] = 2;
a[2] = 3;

// how about multiple arrays as well?

$.ajax({
    type : "POST",
    url : "/myurl",
    data : //not sure how to write this, ("a="+a), ?
    success : function(response) {
       // do something ... 
    },
    error : function(e) {
       alert('Error: ' + e);
    }
});

In Java, I would like to create a class to receive data from AJAX, and I create a class to receive data

package com.amazon.infratool.ui;

import lombok.Getter;
import lombok.Setter;


@Setter @Getter
public class RepairInfomationParameters {
//how to write this variable?
    List<String> a = null; // is it something like this?
}

What is the correct way to do this? Thanks!

Vivin Paliath · Answer 1 · 2016-06-15T16:14:23.417

34

You can do this from the JavaScript side:

$.ajax({
    type : "POST",
    url : "/myurl",
    data : {
        myArray: a //notice that "myArray" matches the value for @RequestParam
                   //on the Java side
    },
    success : function(response) {
       // do something ... 
    },
    error : function(e) {
       alert('Error: ' + e);
    }
});

Then on the Java side (in Spring 3), assuming that this method is mapped by /myurl:

public String controllerMethod(@RequestParam(value="myArray[]") Integer[] myArray){
    ....
}

I believe the following will also work:

public String controllerMethod(@RequestParam(value="myArray[]") List<Integer> myArray){
    ....
}

Spring is smart enough to figure out how to do the binding.

For multiple arrays, you might want to just have a command object:

public class MyData {
    private List<Integer> firstArray;
    private List<Integer> secondArray;
    private List<Integer> thirdArray;

    ...
    ...
}

Then on the JavaScript side:

$.ajax({
    type : "POST",
    url : "/myurl",
    data : {            
        myData: {
           "firstArray": firstArray,
           "secondArray": secondArray,
           "thirdArray": thirdArray
        }            
    },
    success : function(response) {
       // do something ... 
    },
    error : function(e) {
       alert('Error: ' + e);
    }
});

On the Java side, you can bind using @ModelAttribute:

public String controllerMethod(@ModelAttribute(value="myData") MyData myData) throws ParseException {
    ....
}

EDIT

Changed the @RequestParam annotation to use myArray[] instead of just myArray, since this change appears to have been made in Spring after this answer was first posted.

edited Jun 15 '16 at 16:14

answered Jul 10 '13 at 00:04

Vivin Paliath

94,126
40
223
295

Thanks @vivin, how about multiple arrays? data: {myArray: a, myArray2: b, ...} ? – Alfred Zhong Jul 10 '13 at 00:11
should myArray be a string like "myArray"? – Alfred Zhong Jul 10 '13 at 00:13
@AlfredZhong I saw that you were using an array of `int`s, which is why I made it `Integer`. But there is no reason that you can't make it into `String[]` or `List`. – Vivin Paliath Jul 10 '13 at 00:17
@AlfredZhong I modified the second example to use `ModelAttribute` instead of `RequestParam`. `RequestParam` is for primitives. – Vivin Paliath Jul 10 '13 at 00:19
I got a [object Object] error, I guess it is something related to the data when $ajex converts it to a string under the cover? – Alfred Zhong Jul 10 '13 at 01:35
@AlfredZhong You must have some other error in your JavaScript. Are there any more details? – Vivin Paliath Jul 10 '13 at 15:30
Thanks a lot for helping. I removed the ModelAttribute annotation and use just string to pass data, like in my own answer, and it works now! – Alfred Zhong Jul 10 '13 at 18:47
@VivinPaliath Could you help me on this http://stackoverflow.com/questions/18102452/spring-mvc-415-unsupported-media-type – jackyesind Aug 07 '13 at 12:23
The key thing was you have to specify `[]` after variable name like `myArray[]`. Gosh, ate my half day. – Half Blood Prince Jul 16 '16 at 09:22

a.valchev · Answer 2 · 2015-02-12T08:24:01.320

It is very simple passing such data to the Spring MVC controller, when you have in mind that data is being parsed from string. So if you want to get an array/list in the controller - pass a stringified version of the array:

public String method(
        @RequestParam(value = "stringParam") String stringParam,
        @RequestParam(value = "arrayParam") List<String> arrayParam) {
    ...
}

and the corresponding javascript with jQuery would be like:

$.post("/urlToControllerMethod",
    {
        "stringParam" : "test",
        "arrayParam" : [1, 2, 3, "test"].toString()
    }
);

Note: the parameter type

List<String> arrayParam

could be as well replaced with the array equivalent

String[] arrayParam

redochka · Answer 3 · 2017-02-01T20:36:05.050

6

Vivin Paliath doesn't work unless you use myArray[]

public String controllerMethod(@RequestParam(value="myArray[]") Integer[] myArray){
    ...
}

edited Feb 01 '17 at 20:36

answered Apr 13 '15 at 08:57

redochka

12,345
14
66
79

This seemed to work in our case too, whereas Vivin's answer didn't. – Kayaman Nov 19 '15 at 12:05
Looks like it was updated in recent versions on spring. I'll update my answer. – Vivin Paliath Jun 15 '16 at 16:12

score 3 · Answer 4 · answered Mar 23 '16 at 09:59

If you are using spring mvc 4 then below will be the best approach

Jquery code

var dataArrayToSend = []; dataArrayToSend.push("a"); dataArrayToSend.push("b"); dataArrayToSend.push("c");

// ajax code

$.ajax({ contentType: "application/json", type: "POST", data: JSON.stringify(dataArrayToSend), url: "/appUrl", success: function(data) { console.log('done'); }, error: function(jqXHR, textStatus, errorThrown) { console.log('error while post'); } });

Spring controller code

@RequestMapping(value = "/appUrl", method = RequestMethod.POST) public @ResponseBody void yourMethod(@RequestBody String[] dataArrayToSend) { for (String data : dataArrayToSend) { System.out.println("Your Data =>" + data); } }

check this helps you or not!

Cheers!

score 3 · Answer 5 · edited May 08 '18 at 10:13

Fully tested solution

$.ajax({
    type : "POST",
    url : "/myurl",
    data : {
        myArray: a //notice that "myArray" matches the value for @RequestParam
                   //on the Java side
    },
    success : function(response) {
       // do something ... 
    },
    error : function(e) {
       alert('Error: ' + e);
    }
}); 

@RequestMapping(value = "/save/", method = RequestMethod.POST)
    public String controllerMethod(@RequestParam(value="myArray[]") List<Integer> myArray){
        System.out.println("My Array"+myArray.get(0));
        return "";
    }

score 2 · Answer 6 · answered Jul 10 '13 at 18:46

I end up doing this and it works

In js,

var a = [];
a[0] = 1;
a[1] = 2;
a[2] = 3;


$.ajax({
    type : "POST",
    url : "/myurl",
    data : "a="+a,  //multiple array, just add something like "&b="+b ...
    success : function(response) {
       // do something ... 
    },
    error : function(e) {
       alert('Error: ' + e);
    }
});

java side, get a class to receive data, using lombok

@Setter @Getter public class MyData { private ArrayList a;
}

then in the controller

@RequestMapping(value = "/repair_info", method = RequestMethod.POST)
public ModelAndView myControl(MyData myData) {
    // get data with myData object
}

Pass array data from javascript in browser to spring mvc controller using ajax

6 Answers6

Linked