web-dev-qa-db-fra.com

Passer des données de tableau de javascript dans le navigateur au contrôleur mvc de printemps en utilisant ajax

Je souhaite passer un tableau de javascript dans un navigateur Web à un contrôleur Spring MVC utilisant AJAX

En javascript, j'ai

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

En Java, je voudrais créer une classe pour recevoir des données d'AJAX et créer une classe pour recevoir des données

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

Quelle est la bonne façon de faire cela? Merci!

javascriptjqueryajaxarraysspring-mvc
20
Alfred Zhong

Vous pouvez le faire depuis le côté 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);
    }
});

Ensuite, côté Java (au printemps 3), en supposant que cette méthode est mappée par /myurl:

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

Je crois que les suivants fonctionneront aussi:

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

Spring est assez intelligent pour comprendre comment faire la reliure.

Pour plusieurs tableaux, vous voudrez peut-être simplement un objet de commande:

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

    ...
    ...
}

Ensuite du côté 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);
    }
});

Du côté de Java, vous pouvez lier en utilisant @ModelAttribute:

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

MODIFIER

Modification de l'annotation @RequestParam afin qu'elle utilise myArray[] au lieu de myArray, car cette modification semble avoir été effectuée au printemps après la publication de cette réponse.

30
Vivin Paliath

Vivin Paliath ne fonctionne que si vous utilisez myArray[]

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

Il est très simple de transmettre de telles données au contrôleur Spring MVC, lorsque vous pensez que les données sont analysées à partir de chaîne. Donc, si vous voulez obtenir un tableau/une liste dans le contrôleur, passez une version du tableau rangée avec une chaîne:

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

et le javascript correspondant à jQuery serait comme:

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

Remarque: le type de paramètre

List<String> arrayParam

pourrait aussi bien être remplacé par l'équivalent tableau

String[] arrayParam
4
a.valchev

Si vous utilisez spring mvc 4, la meilleure approche est la suivante:

Jquery code

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

// code 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'); }
});

Code du contrôleur à ressort

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

vérifiez que cela vous aide ou pas!

À votre santé!

2
Chetan Aher

Je finis par faire ça et ça marche

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

Côté Java, demandez à une classe de recevoir des données, en utilisant lombok

@Setter @Getter Classe publique MyData { private ArrayList a;
}

puis dans le contrôleur

@RequestMapping(value = "/repair_info", method = RequestMethod.POST)
public ModelAndView myControl(MyData myData) {
    // get data with myData object
}
1
Alfred Zhong

Solution entièrement testée

$.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