如何在javascript文件中访问Spring MVC模型对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22508773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to access Spring MVC model object in javascript file?
提问by user755806
I am using spring 3 MVC and i have below classes.
我正在使用 spring 3 MVC 并且我有以下类。
External system would call my application using below URL:
外部系统将使用以下 URL 调用我的应用程序：
http://somehost/root/param1/param2/param3
I have a spring MVC controller method as below:
我有一个 spring MVC 控制器方法，如下所示：
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
一些模型.java
public class SomeModel{
private String paramOne;
private String paramTwo;
private String paramThree;
//constructor
//setters and getters
}
SomeJsp.jsp
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
外部Js.js
$(document).ready(function() {
//Here i need the model returned using ModelAndView
//I can get data from model and set into div elements.
});
In external java script file, is it possible to get the model content? If possible, how can i do that?
在外部java脚本文件中，是否可以获取模型内容？如果可能，我该怎么做？
Thanks!
谢谢！
回答by Aurand
JavaScript is run on the client side. Your model does not exist on the client side, it only exists on the server side while you are rendering your .jsp.
JavaScript 在客户端运行。您的模型不存在于客户端，它只存在于您呈现 .jsp 时的服务器端。
If you want data from the model to be available to client side code (ie. javascript), you will need to store it somewhere in the rendered page. For example, you can use your Jsp to write JavaScript assigning your model to JavaScript variables.
如果您希望模型中的数据可用于客户端代码（即 javascript），则需要将其存储在呈现页面中的某个位置。例如，您可以使用 Jsp 编写 JavaScript，将模型分配给 JavaScript 变量。
Update:
更新：
A simple example
一个简单的例子
<%-- SomeJsp.jsp --%>
<script>var paramOne =<c:out value="${paramOne}"/></script>
回答by Patison
You can't access java objects from JavaScript because there are no objects on client side. It only receives plain HTML page (hidden fields can help but it's not very good approach).
您无法从 JavaScript 访问 java 对象，因为客户端没有对象。它只接收纯 HTML 页面（隐藏字段可以提供帮助，但不是很好的方法）。
I suggest you to use ajax and @ResponseBody.
我建议你使用 ajax 和@ResponseBody.
回答by tObi
Here is an example of how i made a list object available for javascript:
这是我如何使列表对象可用于 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>
回答by Splash
I recently faced the same need. So I tried Aurand's way but it seems the code is missing ${}. So the code inside SomeJsp.jsp <head></head>is:
我最近面临同样的需求。所以我尝试了 Aurand 的方式，但似乎代码缺少 ${}。所以 SomeJsp.jsp 里面的代码<head></head>是：
<script>
var model=[];
model.paramOne="${model.paramOne}";
model.paramTwo="${model.paramTwo}";
model.paramThree="${model.paramThree}";
</script>
Note that you can't asssign using var model = ${model}as it will assign a java object reference. So to access this in external JS:
请注意，您不能使用 var 进行model = ${model}分配，因为它会分配一个 java 对象引用。因此，要在外部 JS 中访问它：
$(document).ready(function() {
alert(model.paramOne);
});
回答by Alessandro Dionisi
Another solution could be using in JSP:
<input type="hidden" id="jsonBom" value='${jsonBom}'/>
另一个解决方案可能是在 JSP 中使用：
<input type="hidden" id="jsonBom" value='${jsonBom}'/>
and getting the value in Javascript with jQuery:
并使用 jQuery 在 Javascript 中获取值：
var jsonBom = $('#jsonBom').val();
var jsonBom = $('#jsonBom').val();
回答by Juan Furattini
This way works and with this structure you can create your own framework and do it with less boilerplate.
这种方式有效，使用这种结构，您可以创建自己的框架并使用更少的样板来完成。
Sorry if some error is present, I'm writing this handly with my cellphone
对不起，如果存在一些错误，我正在用我的手机轻松地写这个
Maven dependency:
Maven 依赖：
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>1.7.1</version>
</dependency>
Java:
爪哇：
Person.java(Person Object Class)
Person.java（人对象类）
Class Person {
private String name;
public String getName() {
return this.name;
}
public void setName(String name) {
this.name = name;
}
}
PersonController.java(Person Controller)
PersonController.java（个人控制器）
@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;
}
}
View:
看法：
person.jsp
人物.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:
Javascript：
personScript.js
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);
});
回答by bharath sc
in controller:
在控制器中：
JSONObject jsonobject=new JSONObject();
jsonobject.put("error","Invalid username");
response.getWriter().write(jsonobject.toString());
in javascript:
在 JavaScript 中：
f(data!=success){
var errorMessage=jQuery.parseJson(data);
alert(errorMessage.error);
}
回答by h.meknassi
@RequestMapping("/op")
public ModelAndView method(Map<String, Object> model) {
model.put("att", "helloooo");
return new ModelAndView("dom/op");
}
In your .js
在你的 .js
<script>
var valVar = [[${att}]];
</script>
