Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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!

share|improve this question

2 Answers

up vote 1 down vote

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 {
    ....
}
share|improve this answer
 
Thanks @vivin, how about multiple arrays? data: {myArray: a, myArray2: b, ...} ? –  Alfred Zhong Jul 10 at 0:11
 
@AlfredZhong I have updated the answer. –  Vivin Paliath Jul 10 at 0:11
 
should myArray be a string like "myArray"? –  Alfred Zhong Jul 10 at 0:13
 
@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 Jul 10 at 0:17
 
@AlfredZhong I modified the second example to use ModelAttribute instead of RequestParam. RequestParam is for primitives. –  Vivin Paliath Jul 10 at 0:19
show 4 more comments
up vote 0 down vote

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
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.