如何在 Javascript 中访问模型属性

javascript attributes java spring

2022-09-03 05:39:57

我想在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}";

但它给了我一个响应DTO的字符串表示，即。我可以使用以下命令成功访问 DTO 内的字段：com.req.dto.ResponseDTO@115f4ea

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

但这不适用于 DTO 中的属性，因为它是的。如何在Javascript中获取完整的对象？errorsListObjectErrorresponseDTO

谢谢！

编辑：

最初我正在使用jquery.post

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

现在我想删除Ajax并希望将其转换为非ajax方法（由于一些不可避免的原因）。因此，我正在执行一个普通的表单提交，并希望再次加载相同的表单，并尝试在Javascript中加载模型属性，以便我可以保持其余代码不变。
我想知道它是否可以在Javascript中实现，因为它可以使用Jquery post来实现？data

编辑 2 ：

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

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

答案 1

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

因此，要实现此目标，您必须进行一些转换。我认为您有两种选择：

将RecertDTO对象转换为JSON字符串并将其传递给jsp，您可以直接获得javascript对象。
将 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>

对于选项 #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 则更容易且更易于维护。

答案 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}' +')');