AjaxのDataをControllerで受け取りたい

JAVAの初学者で社員管理Webアプリのデモを作成しています。
非同期処理で社員情報を変更したいのですが、AjaxのDataがどうしてもnullになってしまいます。

実現したいこと

HTMLからuser_idを取得し、AjaxのDataに詰めて、Controllerの引数で受け取りたい。

ソース

Build.gradle
1plugins {
2	id 'org.springframework.boot' version '2.5.12'
3	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
4	id 'java'
5}
6~中略~
7
8dependencies {
9	implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
10	implementation 'org.springframework.boot:spring-boot-starter-jdbc'
11	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
12	implementation 'org.springframework.boot:spring-boot-starter-web'
13	implementation 'mysql:mysql-connector-java:8.0.20'
14	implementation 'org.springframework.boot:spring-boot-starter-validation'
15	implementation('org.webjars:jquery:3.5.1')
16    implementation('org.webjars:bootstrap:4.5.3')
17    implementation('org.webjars:webjars-locator:0.40')
18	implementation 'org.modelmapper:modelmapper:2.3.0'
19	compileOnly 'org.projectlombok:lombok'
20	developmentOnly 'org.springframework.boot:spring-boot-devtools'
21	runtimeOnly 'mysql:mysql-connector-java'
22	annotationProcessor 'org.projectlombok:lombok'
23	testImplementation 'org.springframework.boot:spring-boot-starter-test'
24}

html
1<tbody>
2  <form th:action="@{/Edit}" th:object="${List}" method="post">
3    <tr th:each="list : ${List}">
4      <td th:text="${list.user_id}" id="userId" th:value="${list.user_id}"></td>
5                    //その他テーブル
6      <td>
7        <button onclick="Event()" >ボタン</button>
8      </td>
9    </tr>
10  </form>
11</tbody>

Controller
1@RestController
2public class Controller {
3
4    @PostMapping(path = "/edit")
5    public String retire(@RequestParam int user_id) {
6        //処理
7        return "html";
8    }
9}

js
1function Event() {
2    if (!confirm('この操作は取り消せません。よろしいですか？')) {
3    var data = {user_id:$("#userId").val()}
4    $.ajax({
5        url: '/edit',
6        type: 'post',
7        dataType: 'json',
8        data: data
9    })
10        .done(function () {
11            alert('success!');
12        })
13        .fail(function () {
14            alert('fail!');
15        })
16    }
17}

エラー内容・試したこと

@RequestBody は「Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported」
@RequestParamは「Required request parameter 'user_id' for method parameter type int is not present」

@Controllrtと@RestControllrtの組み合わせや、
contentTypeをapplication/x-www-form-urlencodedにしてみたり、
JSON.stringify(data)にしてみたり、
data:[1]　や data: {user_id:1}にしたりしましたがどうやってもnullになります。

HTMLのButtonでidやvalueにEL式でuser_idをいれてやると希望通り動きます。
練習内容がAjaxで非同期通信することなのですが、AjaxのDataで全て賄うのは難しいのでしょうか。

ご回答、よろしくお願いします。

行動規範の内容に同意します

回答1件

buttonがdeleteEvent()で定義がEvent()
IDは同一ページ内に一意でないといけないが、eachしてるため同じIDの要素がたくさんできている
tdにvalueをval()で取得できるか・・・？あくまで入力コントロールが対象では
url: '/edit',としてるけどコンテキストパスある構成ならアクセスできませんが問題ない？
一応buttonのtypeは明示しておいた方がよい（デフォルトはsubmitなので）

という感じですが、直接ボタンのonclickで実行している関数に引数として与えては？

Thymeleaf
1<button th:onclick="|deleteEvent(${list.user_id})|" type="button">

※文字列の場合はクォートで囲ってください。

JavaScript
1function deleteEvent(userid) {
2    if (!confirm('この操作は取り消せません。よろしいですか？')) {
3    var data = {user_id:userid}

投稿2022/05/08 11:26

編集2022/05/08 21:11

m.ts10806

総合スコア80852

Jorrvaskr_prg

2022/05/08 11:59

回答有り難うございます。＞buttonがdeleteEvent()で定義がEvent() 定義名などは固有名詞だったものを普遍化したさいに漏れたものがあるようです。失礼しました。＞IDは同一ページ内に一意でないといけないが、eachしてるため同じIDの要素がたくさんできている DBから社員リストをクエリで拾ってeathで全表示し、該当の社員行のボタンで編集させる、という動作を目的としています。そのためIDは個別で一意です。＞tdにvalueをval()で取得できるか・・・？あくまで入力コントロールが対象ではこれはどういう意味合いでしょうか。該当行のuser_idを取得したいので「$("#userId").val()」としているのですが考え方が違いますか？＞url: '/edit',としてるけどコンテキストパスある構成ならアクセスできませんが問題ない？これは別メソッドでアクセスを確認しておりますので問題ありません。＞一応buttonのtypeは明示しておいた方がよい（デフォルトはsubmitなので） typeをつけたところアクションが一切なくなってしまいました。また、typeを抜いた場合もやはり「Required request parameter 'user_id' for method parameter type int is not present」となります。そして引数に入れるというポイントよりも大前提として、user_id取得の前にdataを1など数字指定でいれたとしてもnullになってしまうので、そもそも受け取ることができていないという点が当該質問の問題となっております。

m.ts10806

2022/05/08 12:06

>そのためIDは個別で一意です。いえ <tr th:each="list : ${List}"> <td th:text="${list.user_id}" id="userId" th:value="${list.user_id}"></td> この実装だとuserIdというIDが行数分できてますよ。

Jorrvaskr_prg

2022/05/08 12:43

！？なるほど、そこは気づきませんでした。そこは後ほど考えてみます。今一番の困りごとはDataを受け取れないことなので・・・助けてください・・・。

m.ts10806

2022/05/08 18:40

根本的になところはID重複とtdタグに設置しているvalue属性です。 tdにvalue属性はありません。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/td

Jorrvaskr_prg

2022/05/09 01:33

ご指摘のvalue問題と、私の解決したい課題であるajaxのdata受け渡しとは関連がありますか？

m.ts10806

2022/05/09 01:39

値が取得できない →nullが渡る →nullはintに設定できないので、むしろ根本原因です。