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 · Accepted Answer · 2016-06-15 16:14:23Z

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, 2016 at 16:14

answered Jul 10, 2013 at 0:04

Vivin Paliath

95.8k42 gold badges230 silver badges302 bronze badges

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

9 Comments

Alfred Zhong Over a year ago

Thanks @vivin, how about multiple arrays? data: {myArray: a, myArray2: b, ...} ?

Alfred Zhong Over a year ago

should myArray be a string like "myArray"?

Vivin Paliath Over a year ago

@AlfredZhong I saw that you were using an array of ints, which is why I made it Integer. But there is no reason that you can't make it into String[] or List<String>.

Vivin Paliath Over a year ago

@AlfredZhong I modified the second example to use ModelAttribute instead of RequestParam. RequestParam is for primitives.

Alfred Zhong Over a year ago

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?

|

a.valchev · Accepted Answer · 2015-02-12 08:24:01Z

7

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

edited Feb 12, 2015 at 8:24

answered Jan 19, 2015 at 17:43

a.valchev

3884 silver badges10 bronze badges

Comments

redochka · Accepted Answer · 2017-02-01 20:36:05Z

6

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

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

edited Feb 1, 2017 at 20:36

answered Apr 13, 2015 at 8:57

redochka

12.9k15 gold badges69 silver badges81 bronze badges

2 Comments

Kayaman Over a year ago

This seemed to work in our case too, whereas Vivin's answer didn't.

Vivin Paliath Over a year ago

Looks like it was updated in recent versions on spring. I'll update my answer.

Chetan Aher · Accepted Answer · 2016-03-23 09:59:54Z

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!

Suraj Rao · Accepted Answer · 2018-05-08 10:13:58Z

3

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 "";
    }

edited May 8, 2018 at 10:13

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered May 8, 2018 at 10:12

Vikas Jain

311 bronze badge

Comments

Alfred Zhong · Accepted Answer · 2013-07-10 18:46:04Z

2

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
}

answered Jul 10, 2013 at 18:46

Alfred Zhong

7,19111 gold badges50 silver badges61 bronze badges

Collectives™ on Stack Overflow

Pass array data from JavaScript in browser to Spring MVC controller using AJAX

6 Answers 6

9 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

9 Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related