CODEWITHSUNDEEP
javascriptjqueryajaxarraysspring-mvc
Alfred Zhong
Alfred Zhong

Reputation: 7081

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

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!

Upvotes: 23

Views: 67294

Answers (6)

Vikas Jain
Vikas Jain

Reputation: 31

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

Upvotes: 3

redochka
redochka

Reputation: 12819

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

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

Upvotes: 6

Vivin Paliath
Vivin Paliath

Reputation: 95508

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.

Upvotes: 34

Chetan Aher
Chetan Aher

Reputation: 174

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!

Upvotes: 3

a.valchev
a.valchev

Reputation: 388

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

Upvotes: 7

Alfred Zhong
Alfred Zhong

Reputation: 7081

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
}

Upvotes: 2

Related Questions