HTMLのテーブルのデータをSpring BootのControllerへ渡す方法

2020/3/22 Java, JavaScript

HTMLのテーブルのデータをjsonデータに変換し、Spring BootのControllerへデータの受け渡す方法をサンプルを作成しながらご紹介します。

 

先日の次の記事で紹介した技術を応用してます。

テーブルデータをjsonデータに変換する方法
ライブラリを使用すればテーブルデータを簡単にjsonデータに変換することが出来ます。 ライブラリはTable To JSON - Gi...
www.early2home.com
2020-03-21 22:49
ajaxからSpring BootのControllerへJSONを送信する方法（List編）
Javascriptのajax処理を使用して、Spring BootのControllerへJSONデータを送信する方法をご紹介します。送信...
www.early2home.com
2020-03-19 10:55

 

サンプル

最終形はこのようになります。

 

ソースコード

ソースコードです。

index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>JSON TEST</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/table-to-json@1.0.0/lib/jquery.tabletojson.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
  <form>
    <input type="button" id="test" class="btn btn-primary" value="test">
    <input type="button" id="toController" class="btn btn-primary" value="toController">
  </form>
  <table id="sampleTable" class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>first</th>
        <th>last</th>
        <th>handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

 

script.js
$(function() {

  $("#toController").on("click", function() {
    var table = $('#sampleTable').tableToJSON({
      ignoreColumns : [ 0 ]
    });

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

    var request = $.ajax({
      url : "/simple",
      method : "POST",
      data : JSON.stringify(table),
      contentType : 'application/json'
    });

    request.done(function(data, textStatus, jqXHR) {
      $("#log").html(data);
    });

    request.fail(function(jqXHR, textStatus, errorThrown) {
      alert("Request failed: " + textStatus);
    });

    request.always(function() {
      alert("Request always");
    });

  });

});

 

JsonController.java
package com.demo.app.controller;

import java.util.List;

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("/simple")
  public ModelAndView postSimpleModel(@RequestBody List<JsonModel> model, ModelAndView mav) {
    mav.setViewName("index");
    return mav;
  }

}

 

JsonModel.java
package com.demo.app.controller;

import lombok.Data;

@Data
public class JsonModel {
  private String first;
  private String last;
  private String handle;
}

 

動作確認

 

Controllerにデータを渡せていることが確認できました。