web-dev-qa-db-ja.com

Ajaxを使用して、ブラウザのjavascriptから配列データをspring mvcコントローラーに渡します

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

これを行う正しい方法は何ですか？ありがとう！

javascriptjqueryajaxarraysspring-mvc
20
Alfred Zhong

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 side（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 {
    ....
}

[〜＃〜] edit [〜＃〜]

@RequestParam注釈を変更して、myArrayの代わりにmyArray[]を使用するようにしました。この変更は、この回答が最初に投稿された後、Springで行われたようです。

32
Vivin Paliath

データが文字列から解析されていることを念頭に置いている場合、そのようなデータを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
5
a.valchev

myArray[]を使用しない限り、Vivin Paliathは機能しません

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

あなたが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); } }

これを確認してください。

乾杯！

2
Chetan Aher

私はこれを行うことになり、それは動作します

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側、ロンボクを使用してデータを受信するクラスを取得する

@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
}
1
Alfred Zhong

完全にテストされたソリューション

$.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 "";
    }
0
Vikas Jain