Java、JavaScript間でAjaxによるJSONデータ（オブジェクト）のやり取りをしたい！〜Spring編〜

JSからJavaのコントローラにJSONデータを渡す

簡単なTODOアプリを作る際にJSONの受け渡しをおこなったので備忘録
jQueryでのAjax通信を利用しています

todo.js

/** データベースに新規追加. */
  function postItem(newContent) {

    let todo = {
      content: newContent
    };

    $.ajax({
      type: "post",
      url: contextPath + "/post",  //Controllerを呼び出すURLになっていればOK
      data: { jsonTodo: JSON.stringify(todo) }, //JSON(連想配列)を文字列に変換
      dataType: "json"
    }).then(function (result) {
      console.log('成功時の処理が書けます。下のように。');
      let content = result.content;
    }, function () {
      console.log('失敗時の処理が書けます');
    });

キモは JSON.stringify(対象のJSONを文字列に変換)

TodoController.java

	/**
	 * 新規のTODOを追加する.
	 * @param todo 新規投稿TODO
	 * @return 更新の反映されたTODO
	 */
	@ResponseBody //アノテーションにJSONエンコーダが内蔵されているのでJSにオブジェクトを直接リターンできる
	@PostMapping("/post")
	public Todo post(@RequestBody Todo todo) throws JsonParseException, JsonMappingException, IOException  {
        todoRepository.saveAndFlush(todo); // db更新
		return todo;
	}

JavaのコントローラからJSにオブジェクトを渡す

TodoController.java

    @ResponseBody //リターンしたオブジェクトをJSONで解釈できる文字列に自動変換してくれる
	@GetMapping("/find_all_asc")
	public List<Todo> findAllOrderASC(){
		List<Todo> todos = todoRepository.findAll(new Sort(Direction.ASC, "id"));
		return todos;
	}

todo.js

  /** TODOリスト初期化 */
  $.getJSON(contextPath + "/find_all_asc", null,
    function (data, textStatus, jqXHR) { //dataにJSONが詰まっている
　　　 //取得したJSONで行いたい処理を記述できる
      data.forEach(todo => {
        console.log(todo.content);  
      });
    }
  );

AjaxのSetup(jQueryの記述入ってます)

JavaScript

$(function () {
    /**
     * layout.htmlから取得したコンテキストパス.
     * 例）/elabel/edit にアクセスしたい場合は「contextPath + 'elabel/edit'」がURLとして利用できる.
     */
    contextPath = $('#contextPath').val();
});

/**設定を変更したい場合は個別のAjaxメソッド内に記述してください. */
(function () {
    $.ajaxSetup({
        cache: false,
        /**一度使用したAjax通信のレスポンスをキャッシュさせない. */
        timeout: 15000,
        /**タイムアウト設定（暫定） */
        beforeSend: function (xhr, settings) {
            /**通信開始直前の処理 */
            setCsrfTokenToAjaxHeader();
            // showKurukuru();
        },
        success: function (data, status, xhr) {
            /**通信成功時の処理 */
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            /**通信失敗時の処理 */
            console.log("ajax通信に失敗しました");
            console.log("XMLHttpRequest : " + XMLHttpRequest.status);
            console.log("textStatus     : " + textStatus);
            console.log("errorThrown    : " + errorThrown.message);
        },
        complete: function (xhr, status) {
            /**通信完了時の処理（エラーか否かに関わらず） */
            //hideKurukuru();
        },
    });
})();

/**
 * Spring SecurityのCSRF対策によるトークンをajax通信のヘッダに埋め込める関数.
 * 利用するAjax通信の直前に呼び出す形で利用してください.
 */

function setCsrfTokenToAjaxHeader() {
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function (e, xhr, options) {
        xhr.setRequestHeader(header, token);
    });
}

###Thymeleaf

<meta name="_csrf" th:content="${_csrf.token}" />
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<input id="contextPath" type="hidden" th:value="${#request.getContextPath()}" />

参考記事

気の利くJSON.stringify (http://www.symmetric.co.jp/blog/archives/1568)
ajaxからjavaにPOST送信する参考記事
ajaxからjavaにPOST送信する(http://brissyu.blogspot.jp/2015/09/11spring-boot-web-ajax-csrf.html)
spring3 でjsonをPOSTで受け取る(http://ponkotsusechan.hatenadiary.jp/entry/2016/02/01/173000_1)