web-dev-qa-db-ja.com

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}";

しかし、これはerrorsのListであるため、DTO内のObjectError属性に対しては機能しません。 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モデル属性をロードして、残りのコードをそのまま維持できるようにしたいと考えています。
私はそれがJqueryポストを使用して実行できるのでJavaScriptで達成できるかどうか疑問に思っていましたか？

編集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

javajavascriptspringattributes
15
xyz

まず、Javaオブジェクトを直接Javascriptオブジェクトに変換する方法はありません。相互に関係がないためです。1つはサーバー側の言語で、もう1つはクライアント側の言語です。 。

したがって、この目標を達成するには、いくつかの変換を行う必要があります。私はあなたが2つの選択肢を持っていると思います：

  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がはるかに簡単で保守しやすい場合にのみ役立ちます。

17
Grant Zhu

したがって、オブジェクトのリストを使用して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}' +')');
2
Nathan Hanna

とてもシンプル

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>
1
srinivas gowda