web-dev-qa-db-fra.com

Comment accéder à l'objet modèle Spring MVC dans un fichier javascript?

J'utilise le printemps 3 MVC et j'ai sous les classes.

Le système externe appellerait mon application en utilisant l'URL ci-dessous:

http://somehost/root/param1/param2/param3

J'ai une méthode de contrôleur MVC à ressort comme ci-dessous:

public ModelAndView showPage(@PathVariable("param1") String paramOne, @PathVariable("param2") String paramTwo, @PathVariable("param3") String paramThree, HttpServletResponse response) {  
        SomeModel model = new SomeModel(paramOne, paramTwo, paramThree);
       return new ModelAndView("SomeJsp", "model", model);
    }

SomeModel.Java

public class SomeModel{
 private String paramOne;
 private String paramTwo;
 private String paramThree;
//constructor
 //setters and getters

}

SomeJsp.jsp

//In this Jsp i have a div with few elements. Div is not visible by default.
//This jsp has externalJavascript included.
//I enable div and set the data into div elements using jquery.
<script src="<c:url value="/resources/js/extjs.js" />" type="text/javascript"></script>

externalJs.js

$(document).ready(function() {

    //Here i need the model returned using ModelAndView
//I can get data from model and set into div elements.


});

Dans un fichier de script Java externe, est-il possible d'obtenir le contenu du modèle? Si possible, comment puis-je faire cela?

Merci!

javajavascriptjqueryspringspring-mvc
12
user755806

JavaScript est exécuté côté client. Votre modèle n'existe pas côté client, il n'existe que côté serveur pendant le rendu de votre fichier .jsp.

Si vous souhaitez que les données du modèle soient disponibles pour le code côté client (c'est-à-dire javascript), vous devez les stocker quelque part dans la page rendue. Par exemple, vous pouvez utiliser votre Jsp pour écrire du code JavaScript en affectant votre modèle à des variables JavaScript.

Mettre à jour:

Un exemple simple

<%-- SomeJsp.jsp --%>
<script>var paramOne =<c:out value="${paramOne}"/></script>
26
Aurand

Une autre solution pourrait utiliser JSP: <input type="hidden" id="jsonBom" value='${jsonBom}'/>

et obtenir la valeur en Javascript avec jQuery:

var jsonBom = $('#jsonBom').val();

16
Alessandro Dionisi

J'ai récemment fait face au même besoin. J'ai donc essayé la méthode d'Aurand mais il semble que le code manque $ {}. Donc, le code à l'intérieur de SomeJsp.jsp <head></head>is:

<script>
  var model=[];
  model.paramOne="${model.paramOne}";
  model.paramTwo="${model.paramTwo}";
  model.paramThree="${model.paramThree}";
</script>

Notez que vous ne pouvez pas asser à l'aide de var model = ${model} car cela affectera une référence d'objet Java. Donc, pour accéder à cela dans JS externe:

$(document).ready(function() {
   alert(model.paramOne);
});
7
Splash

Cela fonctionne et avec cette structure, vous pouvez créer votre propre framework et le faire avec moins de passe-partout.

Désolé si une erreur est présente, j'écris cette main avec mon téléphone portable

Dépendance Maven:

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>1.7.1</version>
</dependency>

Java:

Person.Java(classe d'objets personne)

Class Person {

    private String name;

    public String getName() {
        return this.name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

PersonController.Java(contrôleur de personne)

@RestController
public class PersonController implements Controller {

    @RequestMapping("/person")
    public ModelAndView handleRequest(HttpServletRequest arg0, HttpServletResponse arg1) throws Exception {
        Person person = new Person();
        person.setName("Person's name");
        Gson gson = new Gson();

        ModelAndView modelAndView = new ModelAndView("person");
        modelAndView.addObject("person", gson.toJson(person));

        return modelAndView;
    }
}

Vue:

person.jsp

<html>
    <head>
        <title>Person Example</title>
        <script src="jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="personScript.js"></script>
    </head>
    <body>
        <h1>Person/h1>
        <input type="hidden" id="person" value="${person}">     
    </body>
</html>

Javascript:

personScript.js

function parseJSON(data) {
    return window.JSON && window.JSON.parse ? window.JSON.parse( data ) : (new Function("return " + data))(); 
}

$(document).ready(function() {
    var personJson = $('#person');
    person = parseJSON(personJson.val());
    alert(person.name);
});
7
Juan Furattini

Voici un exemple montrant comment j'ai créé un objet de liste pour javascript:

var listForJavascript = [];
<c:forEach items="${MyListFromJava}" var="listItem">
  var arr = [];

  arr.Push("<c:out value="${listItem.param1}" />");
  arr.Push("<c:out value="${listItem.param2}" />");

  listForJavascript.Push(arr);
</c:forEach>
3
tObi

Vous ne pouvez pas accéder aux objets Java à partir de JavaScript car il n'y a aucun objet côté client. Il ne reçoit que des pages HTML simples (les champs cachés peuvent aider mais ce n'est pas une très bonne approche).

Je vous suggère d'utiliser ajax et @ResponseBody.

1
Patison