如何在 Javascript 中访问模型属性

Posted 2023-02-26

【中文标题】如何在 Javascript 中访问模型属性

【英文标题】：How to access model attribute in Javascript

【发布时间】：2012-03-10 20:14:51

【问题描述】：

我想在 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 实现？

---

编辑 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);   

但出现错误且不显示警报 错误：

【问题讨论】：

在某个 AJAX 调用返回 DTO 后，您想在 JSP 文件中还是在客户端访问对象？

在继续之前，请停下来考虑一下：您的模型驻留在服务器上，而javascript发生在客户端上。现在，你想完成什么？

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

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

【参考方案1】：

首先，没有办法将 Java 对象直接转换为 Javascript 对象，因为它们彼此无关。一种是服务器端语言，另一种是客户端语言。 所以要实现这个目标，你必须做一些转换。我认为你有两个选择：

将ResponseDTO对象转成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 则更容易且可维护。

【讨论】：

非常感谢您展示简单和困难的方法。在选项#1 中，我可以使用data. 访问所有属性吗？另请检查我的编辑，我添加了更多详细信息。

@Ajinkya 是的。您可以访问所有属性，例如使用 java 对象。唯一的区别是“错误”表示为一个数组。我不确定我是否正确理解了您的编辑。您说您可以通过 jquery.post 检索每个属性甚至 ObjectError 列表，那么为什么会提出这个问题？ ajax/test.html 中有什么？

我能够在 Ajax 回调中访问它，即在 jquery post 中定义的函数中。但现在我想删除 Ajax，所以我想在 Javascript 中访问模型属性。

我做的和你建议的完全一样。但出现错误missing ) in parenthetical (NaN Source File: http://localhost:7009/portal/request/form/submit Line: 1011, Column: 4 Source Code: (NaN

@Ajinkya 选项 1 或 2？你能提供更多细节吗？第 1011 行是什么？

【参考方案2】：

所以我刚刚使用对象列表实现了与格兰特的第一个选项类似的解决方案，但使用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' +')');

【讨论】：

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

【参考方案3】：

很简单

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>