POST通信と書きつつ多分GET通信もいけるはず。

SpringBootでオブジェクト指向プログラミング中、どうしても通常の送信方法（htmlファイルでformで囲ってsubmitで送信）が取れなかったため、JavaScriptで操作した備忘録。
先に結果を書いておきますが、奮闘したのがなんだかもったいないので試したことも残しておく。
初心者がゴリ押して作ったコードなので参考程度にしてください。

前提

使用OS-Windows10
使用ツール-Spring Tool Suite 4 4.6.2
テンプレートエンジン-Thymeleaf
フレームワーク-mybatis

デモECサイトを作成中。
チームで作業しているため、できるだけほかの人のファイルに影響を与えずに「index.htmlでAボタンを押した際に情報（パラメータ）がjavaファイル（DemoForm.java）へ渡る」機能を実装したい。
Aボタンやパラメータはテーブル内に配置されていて、デザインに変化がないようhtmlでformタグを使いたくない。

※DemoForm.javaでは情報のバイト配列化のみ行い、実際の処理はDemoController.javaに記述されている。

成功した結果

index.html

<table>
　<tr>
　　<th>アイテム名</th><th>値段</th><th>個数</th><th>カート</th>
　</tr>
　<tr th:each="item: ${items}">
　　<td><a href="/sample/item/{id}" th:href="@{/sample/item/{id}(id=${item.id})}" th:text="${item.itemName}"></a>
　　</td>
　　<td class="price" th:text="${item.price}" />
　　<td>
　　　<input type="number" name="itemCount" value="0" min="0" />
　　　<input type="hidden" name="itemId" th:value="${item.id}" />
　　</td>
　　<td>
　　　<!-- Aボタン押下とともにIDと個数をパラメータとして送信 --> 
　　　<button class="AButton">追加</button>
　　</td>
　</tr>
</table>

scriptタグで囲んでhtmlファイル内に記述してもOK.js

$(() => {
  $('.AButton').on('click', demo);
});     

let demo = (event) =>{
  let itemId = $(event.target).parents('tr').find("[name='itemId']").val();
  let itemCount = $(event.target).parents('tr').find("[name='itemCount']").val();

  if (itemCount == 0){
    alert("個数が0です。");
    return;
  };

  let f = document.createElement('form');   
  f.method = 'post';
  f.action = '/sample/cart/add';
  f.innerHTML = '<input name="itemCount" value='+  itemCount + '>' +
                '<input name="itemId" value=' + itemId + '>';
  document.body.append(form);
  form.submit();
}

パラメータとして送信したいのは
<input type="number" name="itemCount" value="0" min="0" />の値と
<input type="hidden" name="itemId" th:value="${item.id}" />の値。

一番最後に解説をコメントで記したものをのせておくので、各コードで何をやっているかはそちらを見てください。

if文については試行コードでは省略します。

試行１：ajaxで情報を送り、画面遷移のコードをくっつける

ajaxは本来非同期通信（画面遷移を伴わない通信）のための仕組みですが、情報を送るだけ送ってlocation.hrefとかで画面が切り替わればformタグをsubmitした時と同じ動きをするのでは・・・？と思いやってみました。
（ajaxについては初心者目線でAjaxの説明がわかりやすかったです。）

ajaxでやってみる.js

$(() => {
  $('.AButton').on('click', demo);
});     

let demo = (event) =>{
  let itemId = $(event.target).parents('tr').find("[name='itemId']").val();
  let itemCount = $(event.target).parents('tr').find("[name='itemCount']").val();

  let data = {
        'itemtId':   itemId,
        'itemCount': itemCount
  };

  //非同期通信で情報送信
    $.ajax({
        type:           'POST',
        url:            '/sample/cart/add',
        cache:          false,
        data:           JSON.stringify(data),
        datatype:       'json',
        timeout:        10000,
        contentType:    'application/json',
        scriptCharset:  'utf-8'
        })

    .then((result) => {
        console.log('ajax connection successed.');
    }, () => {
        console.error('Error:ajax connection failed.');
    });

    location.href='/sample/cart/add';   
}

永遠にError:ajax connection failed.が出続けました。
Controllerのアノテーションをいじったら情報自体は飛んだのですが、ページの表示ができずBadRequestと言われて諦めました。
多分ちゃんとajaxで情報を送信方法はあると思います・・・。

試行２：jQueryのPOST()メソッドを使ってみる。

「POST通信」で調べていると出てきたので使ってみました。
が、うまくできないのでさらに調べてみるとpost()はajaxを簡略化したものだということが判明し、ajaxで無理だったことができるわけねー！と思いやめました。

試行３：form部品をJavaScriptで生成してsubmit()メソッドで送信する

成功パターン。
方針を決めたときからこれが最後に残された方針だと思っていたのでうまくいって本当によかったです・・・。PHPだとPostLink()なんてメソッドもあるみたいですが。

とはいえJavaScriptの知識がすっからかんのため、半日かけて最終的に冒頭のコードにたどり着きました。

解説コメントつきコード