如何在Javascript中访问模型属性

Question

如何在Javascript中访问模型属性

15

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

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：

var data = "${data}";

但它给我返回了responseDTO的字符串表示，即com.req.dto.ResponseDTO@115f4ea。我可以成功地使用以下方式访问DTO内的字段：

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

但是对于DTO中的errors属性，由于它是ObjectError的List，所以这种做法不起作用。我该如何在JavaScript中获取完整的responseDTO对象？

谢谢！

编辑：

最初我使用的是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 post是可行的吗？

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

在JavaScript中

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

但是出现错误，而且没有弹出警告框
错误信息：
enter image description here

- Ajinkya

你想在哪里访问对象，在 JSP 文件中还是在某个 AJAX 调用返回 DTO 之后客户端上访问？ - Ralph

在继续之前，请停下来考虑：您的模型存储在服务器上，JavaScript 发生在客户端。那么，您想要实现什么？ - pap

@Ralph：不，我想删除Ajax部分。请查看我的编辑获取更多详细信息。 - Ajinkya

@pap：请检查我的编辑并让我知道是否有任何正确/更好的方法来实现这一点。 - Ajinkya

3个回答

2

这非常简单

in your spring controller 

model.addAttribute("attributeName", "attributeValue");

in the script

<script type="text/javascript">      
     $(window).on('load', function () {             
            var springAttribute= '${attributeName}';
            alert(springAttribute);     
    </script>

- srinivas gowda

2

我刚刚实现了与Grant第一种选项类似的解决方案，使用了一个对象列表，但使用Gson库将对象转换为JSON字符串，然后使用JSON.parse()将其转换为JavaScript对象：

在服务器上：

List<CustomObject> foo = database.getCustomObjects();
model.addAttribute("foo", new Gson().toJson(foo));

在页面的javascript中：

var customObjectList = JSON.parse('${foo}');
console.log(customObjectList);

请注意，当我引用模型对象foo时，我使用字符串'${foo}'。我认为你出错的原因是因为你在字符串外部引用了它。因此，正确的代码应该是：

var data = eval('('+ '${dataJson}' +')');

- Nathan Hanna

你如何处理 ${foo} 中的单引号字符？所生成的 JavaScript 最终会变成：var customObjectList = JSON.parse('{"foo":"bar's baz"}');这是无效的。使用 fn:replace 显然是一个选择，但似乎有点 hack-ish。还有其他需要处理的特殊字符吗？ - Andrew

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Grant Zhu · Accepted Answer

首先，由于Java对象和Javascript对象没有任何关系，所以无法直接将Java对象转换为Javascript对象。前者是服务器端语言，后者是客户端语言。

要实现这个目标，您需要进行一些转换。我认为您有两个选择：

1. 将ResponseDTO对象转换为JSON字符串并传递给JSP，您可以直接获得Javascript对象。 2. 将ResponseDTO对象传递给JSP，并像您现在尝试的那样填充Javascript对象。

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

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>

对于第二个选项，

//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更加简单和易于维护。