如何在Javascript中访问模型属性

问题描述：

我想在Javascript中访问模型属性。我使用以下代码：

I want to access a model attribute in Javascript. I use the following code:

model.addAttribute("data", responseDTO);

我的DTO课程：

public class ResponseDTO {

    private List<ObjectError> errors;

    private Boolean actionPassed;

    private String dataRequestName;

    // and setter getter for all fields
}

我尝试使用以下方式访问DTO：

I tried accessing the DTO using:

var data = "${data}";

但是它给了我一个responseDTO的字符串表示，即 com。 req.dto.ResponseDTO@115f4ea 。我可以使用以下方法成功访问DTO中的字段：

But it is giving me a string representation of responseDTO instead, i.e com.req.dto.ResponseDTO@115f4ea. I can successfully access a field inside the DTO using:

 var data = "${data.actionPassed}";

但这不适用于错误 DTO内部的属性，因为它是 List ObjectError 。如何在Javascript中获得完整的 responseDTO 对象？

But this is not working for the errors attribute inside the DTO, as it is a List of ObjectError. How can I get complete responseDTO object in Javascript?

谢谢！

编辑：

最初我使用 jquery.post

$.post('ajax/test.html', function(data) {
  // Here I was able to retrieve every attribute even list of ObjectError.
});

现在我想删除Ajax并希望将其转换为非ajax方法（因为一些不可避免的）原因）。所以我正在进行正常的表单提交，并希望再次加载相同的表单并尝试在Javascript中加载 data 模型属性，以便我可以保留其余的代码。

我想知道它是否可以在Javascript中实现，因为它可以使用Jquery帖子吗？

Now I want to remove Ajax and want to convert it into non-ajax approach (because of some unavoidable reasons). So I am doing a normal form submit and want load same form again and trying to load data model attribute in Javascript so that I can keep the rest of the code as it is.
I was wondering if it can be achieved in Javascript as it is doable using Jquery post?

编辑2：

我试过（谢谢你@Grant的建议）

I tried (Thank you @Grant for suggestions)

JSONObject jsonObject =JSONObject.fromObject(responseDTO);
String jsonString = jsonObject.toString();
model.addAttribute("data",jsonString);

和Javascript

and in Javascript

var data = eval('('+ ${dataJson} +')');   // Getting error on this line  
alert(data.actionPassed);

但是显示错误并且没有警报显示

错误：

But getting error and no alert is displayed
Error :

答

首先，没有办法将Java对象直接转换为Javascript对象，因为它们彼此无关。一个是服务器端语言，另一个是客户端语言。

所以要实现这个目标，你必须做一些转换。我认为你有两个选择：

First of all, there's no way to convert a Java object to a Javascript object directly since they have nothing to do with each other. One is server-side language and the other is client-side language.

So to accomplish this goal, you have to do some convertion. I think you have two options:

将ResponseDTO对象转换为JSON字符串并将其传递给jsp，你可以直接获得javascript对象。 / li>
将ResponseDTO对象传递给JSP并按照您现在尝试的方式填充javascript对象。

对于选项＃1，您应该使用库来通过Java对象生成JSON字符串。您可以使用 JSON-lib 。
例如：

For option #1, you should use a library to generate JSON string by the Java object. You can use this one JSON-lib. e.g:

JSONObject jsonObject = JSONObject.fromObject( responseDTO );  
/*  
  jsonStr is something like below, "errors" represents the List<ObjectError>
  I don't know what's in ObjectError, errorName is just an example property.
  {
    "dataRequestName":"request1",
    "actionPassed":true,
    "errors":[{"errorName":"error"},{"errorName":"unknown error"}]
  } 
*/
String jsonStr = jsonObject.toString();
model.addAttribute("dataJson", jsonStr);  

/*In JSP, get the corresponding javascript object
 by eval the json string directly.*/
<script>
var data = eval('('+'${dataJson}'+')'); 
</script>

对于选项＃2，

//Pass java object as you do now
model.addAttribute("data",responseDTO);

//In JSP, include jstl taglib to help accessing List.
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<script>
var errorArr = [], errorObj;
<c:forEach var="error" items="${data.errors}">
    errorObj = { errorName: '${error.errorName}' };
    errorArr.push(errorObj);                                  
</c:forEach>

//Populate the corresponding javascript object.
var data = {
  dataRequestName: '${data.dataRequestName}',
  actionPassed: ${data.actionPassed},
  errors: errorArr
};
</script>

正如您所看到的，选项＃2很复杂，只有在Java对象很简单时才有用＃1更容易维护。

As you can see, option #2 is complicated and only useful if the Java object is simple while option #1 is much easier and maintainable.

如何在Javascript中访问模型属性

相关推荐