質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

3回答

2067閲覧

jQueryで動的にtableを作成して、tableの値をSpringBootのcontrollerで取得したい

takahiro00

総合スコア84

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

1クリップ

投稿2018/12/10 14:17

前提・実現したいこと

jQueryで動的にtableを作成して、そのtableの値をSpringBootのcontrollerで取得したいのですが、
うまく取得できません。
取得したい値はbaseSalaryです。
2日悩みましたが、どうしてもcontrollerで取得しようとすると値がnullになってしまいます。
ご教授頂ければと思います。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja" xmlns:th="http://www.thymeleaf.org" 3 xmlns:sec="http://www.thymeleaf.org/extras/spring-security4"> 4<head> 5<meta charset="UTF-8"> 6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 7<script src="/js/sampleJs.js" th:src="@{/js/baseSalary.js}"></script> 8</head> 9<body> 10<h1>ページ</h1> 11 <form method="post"> 12 <select id="getMonthsSelect" name="getMonthsSelect" onChange="monthsSelect(this)"> 13 <option th:each="item : ${getMonthsSelect}" 14 th:value="${item.key}" 15 th:text="${item.value}">singleSelect</option> 16 </select><br> 17 </form> 18 <form method="post" th:action="@{/baseSalaryUpd}"> 19 <table id="t1"></table> 20 <p><input type="submit" value="更新"></p> 21 </form> 22</body> 23</html>

javascript

1function monthsSelect(obj){ 2 var objVar = obj.value; 3 $.ajax({ 4 "type" : "GET", 5 "url" : "baseSalaryMonth", 6 "data" : {baseSalaryMonthStr: objVar}, 7 "dataType" : "json", 8 }).then( 9 function (data) { 10 $('#t1').html(''); 11 $('#t1').append($('<thead>')).append($('<tbody>')); 12 $('<tr>') 13 .append($('<th>').attr('id','userId').text('aa')) 14 .append($('<th>').attr('id','fullNm').text('bb')) 15 .append($('<th>').attr('id','baseSalary').text('cc')) 16 .appendTo($('#t1 thead')); 17 data.forEach(function(x){ 18 $('<tr>') 19 .append($('<td>').text(x.userId)) 20 .append($('<td>').text(x.fullNm)) 21 .append($('<td>').append($('<input type="text" name = "baseSalary">').val(x.baseSalary))) 22 .appendTo($('#t1 tbody')); 23 }); 24 }, 25 function () { 26 //通信失敗 27 alert("読み込み失敗"); 28}); 29};

java

1 @RequestMapping(value = "/baseSalaryUpd" , method = RequestMethod.POST) 2 public ModelAndView baseSalaryUpd(@Valid @ModelAttribute BaseSalary baseSalary, BindingResult bindingResult, ModelAndView mav, Principal principal){ 3 System.out.println(baseSalary); 4 return null; 5 }

java

1package com.kproject01.entity; 2 3 4public class BaseSalary { 5 6 private int userId; 7 private String fullNm; 8 private int baseSalary; 9 private int yearDay; 10 11 public int getUserId() { 12 return userId; 13 } 14 public void setUserId(int userId) { 15 this.userId = userId; 16 } 17 public String getFullNm() { 18 return fullNm; 19 } 20 public void setFullNm(String fullNm) { 21 this.fullNm = fullNm; 22 } 23 public int getBaseSalary() { 24 return baseSalary; 25 } 26 public void setBaseSalary(int baseSalary) { 27 this.baseSalary = baseSalary; 28 } 29 public int getYearDay() { 30 return yearDay; 31 } 32 public void setYearDay(int yearDay) { 33 this.yearDay = yearDay; 34 } 35} 36

とりあえずSystem.out.println(baseSalary);に値が入ればと思います。

補足情報(FW/ツールのバージョンなど)

java8
SpringBoot2.0
jquery1.9.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rubytomato

2018/12/15 08:32

ブラウザでページを表示した状態(つまりtable要素が描画された状態)のHTMLソースコードを質問文に追記して頂くことはできますか。
takahiro00

2018/12/17 11:19

はい 以下になります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="/js/baseSalary.js"></script> </head> <body> <h1>ページ</h1> <form method="post"> <select id="getMonthsSelect" name="getMonthsSelect" onChange="monthsSelect(this)"> <option value="201811">2018年11月</option> <option value="201809">2018年9月</option> <option value="201810">2018年10月</option> </select><br> </form> <form method="post" action="/baseSalaryUpd"><input type="hidden" name="_csrf" value="8af3f53d-3a6a-4b32-adbc-ad43997b06e1"/> <table id="t1"></table> <p><input type="submit" value="更新"></p> </form> </body> </html>
takahiro00

2018/12/17 13:05

あれ、テーブルが表示されてない
takahiro00

2018/12/17 13:18 編集

手打ちで抜粋しました。 以下になります。 <table id=“t1> <thead> <tr> <th id=“userId”>aaa</th> <th id=“fullNm”>bbb</th> <th id=“baseSalary”>ccc</th> </thead> <tbody> <tr> <td>1</td> <td>あああ</td> <td> <input type=“text” name=“baseSalary”> </td> </tr> </tbody> </table> もう完全にお手上げ状態です。。。。
rubytomato

2018/12/17 14:08 編集

要素を動的に追加している部分のHTMLソースコードは確認できないみたいですね。 このフォームで実現したい点について確認させてください。 たとえば、このテーブルが複数行のデータを表示していた場合、フォームで送りたいのは1行単位でしょうか、それともテーブルに表示されている行すべてのデータを送りたいのでしょうか? もし複数行を全部(つまりテーブル全体のbaseSalary)送信したい場合、コントローラーの実装に問題があるように思います。
takahiro00

2018/12/18 10:09

はい テーブルに表示されている全てのデータを送りたいです。 やはりcontrollerに問題がありますか・・・
guest

回答3

0

formの中のinputタグが

js

1<input type="text" name = "baseSalary">

をforEachで繰り返しているのでフォームデータとしては baseSalary[] (単純な文字列の配列です)になるのではないでしょうか?
これを受けるためのコントローラ側が下記の形では引数が対応しないと思います。

java

1public ModelAndView baseSalaryUpd(@Valid @ModelAttribute BaseSalary baseSalary, BindingResult bindingResult, ModelAndView mav, Principal principal){

投稿2018/12/10 15:43

euledge

総合スコア2404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takahiro00

2018/12/12 14:08

ご回答ありがとうございます。 ControllerとentityをbaseSalary[]にしたのですが、 java.lang.NoSuchMethodException: [Lcom.kproject01.entity.BaseSalary;.<init>() というエラーになってしまい。。。。
euledge

2018/12/12 14:52

どのように変更したのかを、質問に追記していただけると原因がわかるかもしれません。
takahiro00

2018/12/15 02:01

《controller》 @RequestMapping(value = "/baseSalaryUpd" , method = RequestMethod.POST) public ModelAndView baseSalaryUpd(@Valid @ModelAttribute BaseSalary baseSalary[], BindingResult bindingResult, ModelAndView mav, Principal principal){ System.out.println(baseSalary); return null; } 《entity》 public class BaseSalary { //ユーザID private int userId; //フルネーム private String fullNm; //基本給 private int baseSalary[]; //年月 private int yearDay; 〜〜以下略 上記のように変更しました。 見辛かったらすみません
euledge

2018/12/15 12:47

inputタグにはname=baseSalaryしかないので、String[] baseSalaryしかコントローラでは受け入れられないんではないかと思います。
takahiro00

2018/12/17 11:52

@RequestMapping(value = "/baseSalaryUpd" , method = RequestMethod.POST) public ModelAndView baseSalaryUpd(@Valid @ModelAttribute String[] baseSalary, BindingResult bindingResult, ModelAndView mav, Principal principal){ System.out.println(baseSalary); return mav; } うまくは行きませんでしたが、こういう感じでしょうか
guest

0

ベストアンサー

複数行あるデータをまとめて受け取るコントローラ実装の一例です。ご参考までに。
この方法以外にも複数行(配列)を受け取る実装方法はあると思いますので、調べてみてください。

Formクラス

java

1public class ConfirmForm implements Serializable { 2 3 private static final long serialVersionUID = 6108540341296577157L; 4 5 private List<Item> item; 6 7 private List<String> title; 8 9 public List<Item> getItem() { 10 return item; 11 } 12 13 public void setItem(List<Item> item) { 14 this.item = item; 15 } 16 17 public List<String> getTitle() { 18 return title; 19 } 20 21 public void setTitle(List<String> title) { 22 this.title = title; 23 } 24 25}

java

1public class Item implements Serializable { 2 3 private static final long serialVersionUID = -8282736048324073468L; 4 5 private Long id; 6 7 private String name; 8 9 public Long getId() { 10 return id; 11 } 12 13 public void setId(Long id) { 14 this.id = id; 15 } 16 17 public String getName() { 18 return name; 19 } 20 21 public void setName(String name) { 22 this.name = name; 23 } 24 25 @Override 26 public String toString() { 27 return "Item [id=" + id + ", name=" + name + "]"; 28 } 29 30} 31

Controller

java

1@PostMapping(path = "confirm") 2public String confirm(ConfirmForm form) { 3 if (form.getTitle() != null) { 4 form.getTitle().forEach(System.out::println); 5 } 6 if (form.getItem() != null) { 7 form.getItem().forEach(System.out::println); 8 } 9 return "confirm"; 10}

HTMLページ

ポイントはname属性の名前に添え字を付けることです。これでList型で受け取ることができます。
また、名前はConfirmFormクラスのフィールド名と一致させておく必要があります。(正確にはセッターですが)
Itemクラスのようなオブジェクトの場合は、item[0]の後にそのオブジェクトのフィールドを指定する必要があります。

html

1<form action="/confirm" method="post"> 2 <div> 3 title<input type="text" name="title[0]" value="aaa" /> 4 id<input type="text" name="item[0].id" value="100" /> 5 name<input type="text" name="item[0].name" value="test1" /> 6 </div> 7 <div> 8 title<input type="text" name="title[1]" value="bbb" /> 9 id<input type="text" name="item[1].id" value="200" /> 10 name<input type="text" name="item[1].name" value="test2" /> 11 </div> 12 <div> 13 title<input type="text" name="title[2]" value="ccc" /> 14 id<input type="text" name="item[2].id" value="300" /> 15 name<input type="text" name="item[2].name" value="test3" /> 16 </div> 17 <input type="submit" value="確認" /> 18</form>

投稿2018/12/18 13:56

rubytomato

総合スコア1752

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takahiro00

2018/12/20 12:42

すみませんご丁寧にありがとうございます。 上記を参考に色々試していい所まで行ったのですが、ダメでした、、、、 html側で[0]でbaseSalaryを表示すすることはできたのですが、 controller側でその値を受け取ることができません。。。 もう10日間以上頭を抱えているので、もう迷宮入りにしようと思います。。。
guest

0

諦めずに不屈の闘志で頑張ったら解決しました。
皆様ご協力ありがとうございました。

java

1 @RequestMapping(value = "/baseSalaryUpd" , method = RequestMethod.POST) 2 public ModelAndView baseSalaryUpd(@Valid @ModelAttribute BaseSalary baseSalary, BindingResult bindingResult, ModelAndView mav, Principal principal){ 3 System.out.println(baseSalary); 4 return mav; 5 }

java

1package com.kproject01.entity; 2 3import java.io.Serializable; 4import java.util.List; 5 6public class BaseSalary implements Serializable{ 7 8 private static final long serialVersionUID = 1L; 9 10 private int userId; 11 private String fullNm; 12 private Integer baseSalary; 13 private Integer baseSalaryList[]; 14 private int userIdList[]; 15 private int yearDay; 16 17 public int getUserId() { 18 return userId; 19 } 20 public void setUserId(int userId) { 21 this.userId = userId; 22 } 23 public String getFullNm() { 24 return fullNm; 25 } 26 public void setFullNm(String fullNm) { 27 this.fullNm = fullNm; 28 } 29 public int getYearDay() { 30 return yearDay; 31 } 32 public void setYearDay(int yearDay) { 33 this.yearDay = yearDay; 34 } 35 public Integer getBaseSalary() { 36 return baseSalary; 37 } 38 public void setBaseSalary(Integer baseSalary) { 39 this.baseSalary = baseSalary; 40 } 41 public Integer[] getBaseSalaryList() { 42 return baseSalaryList; 43 } 44 public void setBaseSalaryList(Integer baseSalaryList[]) { 45 this.baseSalaryList = baseSalaryList; 46 } 47 public int[] getUserIdList() { 48 return userIdList; 49 } 50 public void setUserIdList(int userIdList[]) { 51 this.userIdList = userIdList; 52 } 53 54 55}

javaScript

1function monthsSelect(obj){ 2 var objVar = obj.value; 3 var count = 0; 4 $.ajax({ 5 "type" : "GET", 6 "url" : "baseSalaryMonth", 7 "data" : {baseSalaryMonthStr: objVar}, 8 "dataType" : "json", 9 }).then( 10 function (data) { 11 $('#t1').html(''); 12 $('#t1').append($('<thead>')).append($('<tbody>')); 13 $('<tr>') 14 .append($('<th>').attr('id','userId').text('aaa')) 15 .append($('<th>').attr('id','fullNm').text('bbb')) 16 .append($('<th>').attr('id','baseSalary').text('ccc')) 17 .appendTo($('#t1 thead')); 18 data.forEach(function(x){ 19 $('<tr>') 20 .append($('<td>').text(x.userId)) 21 .append($('<td>').text(x.fullNm)) 22 .append($('<td>').append($('<input type="hidden" name = "userIdList['+count+']">').val(x.userId))) 23 .append($('<td>').append($('<input type="text" name = "baseSalaryList['+count+']">').val(x.baseSalary))) 24 .appendTo($('#t1 tbody')); 25 count++; 26 }); 27 }, 28 function () { 29 //通信失敗 30 alert("読み込み失敗"); 31}); 32};

投稿2018/12/20 13:29

takahiro00

総合スコア84

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問