簡體   English   中英

如何在Javascript中訪問模型屬性

[英]How to access model attribute in Javascript

我想在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屬性,因為它是ObjectErrorList 如何在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帖子?


編輯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);   

但是會顯示錯誤並且沒有警報
錯誤:
在此輸入圖像描述

首先,沒有辦法將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>

對於選項#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更容易和可維護時才有用。

所以我剛剛用Grant的第一個選項和一個List對象實現了一個類似的解決方案,但是使用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}' +')');

它非常簡單

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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM