ajaxからSpring BootのControllerへJSONを送信する方法（List編）

Javascriptのajax処理を使用して、Spring BootのControllerへJSONデータを送信する方法をご紹介します。送信するJSONデータは、List が含まれているものです。

本記事は次の記事からの応用になります。基本から押さえたい方は次の記事をご参照ください。

動作

今回は次のようなサンプルを作成しました。ボタンをクリックするとjavascriptでjsonを生成してControllerへ送信処理が実行されます。

実行したときの挙動です。

取得できていることが確認できました。

ディレクトリ構成

最終的な開発環境のフォルダ構成です。

ソースコード

ソースコードです。

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>JSON TEST</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
  <form>
    <input type="button" id="test" value="test">
  </form>
</body>
</html>

前回からの変更はありません。ボタンがあるだけのシンプルな画面です。

script.js

$(function() {

  $("#test").on("click", function() {

    var model = {
      "no" : "1",
      "name" : "1",
      "favorite" : [ {
        "use" : "movie",
        "time" : "120m"
      }, {
        "use" : "voise",
        "time" : "5m"
      } ]
    };

    console.log(model);
    console.log(JSON.stringify(model));

    $.ajax({
      url : '/',
      type : 'POST',
      data : JSON.stringify(model),
      contentType : 'application/json',
      error : function() {
        console.log("error");
      },
      success : function() {
        console.log("success");
      }
    });

  });

});

生成するjsonは配列にします。モデルクラスの構成に合わせてjsonを作成します。

JsonController.java

package com.demo.app.controller;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class JsonController {

  @GetMapping(value = "/")
  public ModelAndView index(HttpServletResponse response, ModelAndView mav) {
    mav.setViewName("index");
    return mav;
  }

  @PostMapping("/")
  public ModelAndView postIndex(HttpServletResponse response, @RequestBody JsonModel model, ModelAndView mav) {
    mav.setViewName("index");
    return mav;
  }

}

こちらは前回からの変更はありません。

JsonModel.java

package com.demo.app.controller;

import java.util.List;
import lombok.Data;

@Data
public class JsonModel {
  private String no;
  private String name;
  private List<Favorite> favorite;
}

Controller側で受け付けるデータ（モデル）です。List型を含んだモデルにしました。

Favorite.java

package com.demo.app.controller;

import lombok.Data;

@Data
public class Favorite {
  private String use;
  private String time;
}

List型の中身です。