22

我想使用 AJAX 将 Web 浏览器中的 javascript 数组传递给 Spring MVC 控制器

在javascript中，我有

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

在Java中，我想创建一个类来接收来自AJAX的数据，我创建一个类来接收数据

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?
}

这样做的正确方法是什么？谢谢！

4

6 回答 6

34

您可以从 JavaScript 端执行此操作：

$.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);
    }
});

然后在 Java 端（在 Spring 3 中），假设这个方法被映射为/myurl：

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

我相信以下内容也将起作用：

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

Spring 足够聪明，可以弄清楚如何进行绑定。

对于多个数组，您可能只想拥有一个命令对象：

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

    ...
    ...
}

然后在 JavaScript 方面：

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

在 Java 端，您可以使用以下方式进行绑定@ModelAttribute：

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

编辑

@RequestParam将注释更改为 usemyArray[]而不是 just myArray，因为此更改似乎是在首次发布此答案后在 Spring 中进行的。

于 2013-07-10T00:04:47.753 回答
6

将此类数据传递给 Spring MVC 控制器非常简单，当您记住数据是从字符串中解析时。因此，如果您想在控制器中获取数组/列表 - 传递数组的字符串化版本：

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

与 jQuery 对应的 javascript 如下：

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

注：参数类型

List<String> arrayParam

也可以用等效的数组替换

String[] arrayParam
于 2015-01-19T17:43:45.563 回答
6

Vivin Paliath 不工作，除非你使用myArray[]

public String controllerMethod(@RequestParam(value="myArray[]") Integer[] myArray){
    ...
}
于 2015-04-13T08:57:40.023 回答
2

我最终这样做了，它有效

在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端，获取一个接收数据的类，使用lombok

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

然后在控制器中

@RequestMapping(value = "/repair_info", method = RequestMethod.POST)
public ModelAndView myControl(MyData myData) {
    // get data with myData object
}
于 2013-07-10T18:46:04.287 回答
2

经过全面测试的解决方案

$.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 "";
    }
于 2018-05-08T10:12:38.010 回答
2

如果您使用的是 spring mvc 4，那么下面将是最好的方法

jQuery代码

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

// ajax代码

$.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'); }
});

弹簧控制器代码

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

检查这是否对您有帮助！

干杯!

于 2016-03-23T09:59:54.380 回答