Как получить доступ к объекту модели Spring MVC в файле javascript?

Я использую spring 3 MVC, и у меня есть классы ниже.

Внешняя система вызовет мое приложение, используя следующий URL:

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

У меня есть метод контроллера MVC spring, как показано ниже:

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.


});

В внешнем java script файле можно получить содержимое модели? Если возможно, как я могу это сделать?

Спасибо!

Ответ 1

JavaScript работает на стороне клиента. Ваша модель не существует на стороне клиента, она существует только на стороне сервера при рендеринге вашего .jsp.

Если вы хотите, чтобы данные из модели были доступны для кода на стороне клиента (например, javascript), вам нужно будет хранить его где-нибудь на странице рендеринга. Например, вы можете использовать Jsp для написания JavaScript, присваивающего вашу модель переменным JavaScript.

Update:

Простой пример

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

Ответ 2

Другое решение может использоваться в JSP: <input type="hidden" id="jsonBom" value='${jsonBom}'/>

и получить значение в Javascript с помощью jQuery:

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

Ответ 3

Недавно я столкнулся с такой же необходимостью. Поэтому я попробовал Aurand, но кажется, что код отсутствует ${}. Таким образом, код внутри SomeJsp.jsp <head></head>:

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

Обратите внимание, что вы не можете asssign с помощью var model = ${model}, поскольку он назначит ссылку на объект java. Поэтому для доступа к этому во внешнем JS:

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

Ответ 4

Этот способ работает, и с этой структурой вы можете создать свой собственный фреймворк и сделать это с меньшим количеством шаблонов.

Извините, если какая-то ошибка присутствует, я пишу это с моим мобильным телефоном

Зависимость от Maven:

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

Java:

Person.java (класс объектов Person)

Class Person {

    private String name;

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

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

}

PersonController.java (Person Controller)

@RestController
public class PersonController implements Controller {

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

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

        return modelAndView;
    }
}

Вид:

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

Ответ 5

Вот пример того, как я создал объект списка для 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>

Ответ 6

Вы не можете получить доступ к java-объектам из JavaScript, потому что на стороне клиента нет объектов. Он получает только обычную HTML-страницу (скрытые поля могут помочь, но это не очень хороший подход).

Я предлагаю вам использовать ajax и @ResponseBody.