[Spring MyBatis thymeleaf]Ajaxを使った非同期処理でform内容を取得する方法

Question

### 実現したいこと登録画面のフォームに値を入力し、非同期通信でデータを登録する。最近springの勉強を始めたので初歩的な質問で申し訳ありませんが、ご教授いただければ幸いです。情報が少なければ追記しますのでよろしくお願いします。 ### 発生している問題・分からないこと formの内容が取得できない ### 該当のソースコード ```Java @Controller @RequestMapping("/data") public class AccountRegistController { @GetMapping(path = "/regist") public String registBtn(@ModelAttribute final RegistForm RegistForm, Model model) { registData(accountRegistForm); //ここでRegistFormの値を取得したい } } ``` ```HTML ``` ```JavaScript function Regist() { $.ajax({ url: '/data/regist', method: 'GET', success: function(response) { let content = $(response); // エラーメッセージを更新 $("#errrMessages").html(content.filter("#errrMessages").html()); } }) } ``` ### 試したこと・調べたこと - [x] teratailやGoogle等で検索した - [ ] ソースコードを自分なりに変更した - [ ] 知人に聞いた - [ ] その他 ##### 上記の詳細・結果 submitするパターンはいくつかあったのですがajaxを用いた非同期でのやり方があまりなかったので質問させていただきます ### 補足特になし

Answer

Jqueryの機能だと思うのですが、
formの入力をシリアライズしたりオブジェクト化する機能があります。
色々調べてみるといいかもしれません。

params = $('form').serialize();

https://qiita.com/tk3fftk/items/22bf451f3051804b142d

successをもつオブジェクトを渡す方法は確かに古い方法ですが、非同期メソッドの処理の流れや、実際にこの古い方法では何をしているのか(具体的に言うとsuccessを持つオブジェクトを引数に渡している)という点が理解出来ているのであれば、特に方法は気にしなくていいと思います。

(質問に記載がないけれど、jQueryでデータを持たす方法は基礎だと思うので割愛)

---
追記。
調べてみると思ったより情報が少なかったので、ナレッジになればいいと思い投稿することにしました。
コードはAIに書いてもらいました。
GetバージョンとPostバージョンを両方書くのが面倒だったので、自動で内容が変わるようにしています。
*下記のコードはすべて動作未検証です。問題があれば回答を編集していきます。

バニラjsだとこんな感じ
FormDataというクラスがあるようです。

引用
FormData
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects
GET送信について
https://developer.mozilla.org/ja/docs/Web/API/FormData
```js
const form = document.querySelector("form");
const formData = new FormData(form);
const method = form.method.toUpperCase(); // フォームの method を取得 (大文字変換)
const url = form.action

if (method === "GET") {
  const params = new URLSearchParams(formData).toString();
  url += `?${params}`;
}

// fetch オプションを作成
const options = { method };
if (method === "POST") {
  options.body = formData;
}

// fetch 実行（thenを使用）
fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error))
  .finally(() => console.log("done"));
```

jQueryだとこんな感じ
(serializeArrayを使うように指示しました)
```js
const $form = $("form");
const method = $form.attr("method"); // デフォルトは POST
const url = $form.attr("action"); // `action` の URL を取得
const data = $form.serializeArray();

$.ajax({
    url: url,
    method: method,
    data: data
})
.done(function(response) {
    console.log(response);
})
.fail(function(jqXHR, textStatus, errorThrown) {
    console.error("Error:", textStatus, errorThrown);
})
.always(function() {
    console.log("done");
});
```

jQueryでsuccessを使用する
```js
const $form = $("form");
const method = $form.attr("method"); // デフォルトは POST
const url = $form.attr("action"); // `action` の URL を取得
const data = $form.serializeArray()

$.ajax({
    url: url,
    method: method,
    data: data,
    success: function(response) {
        console.log(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error("Error:", textStatus, errorThrown);
    },
    complete: function() {
        console.log("done");
    }
});
```

ちなみに、ほかの投稿で上がっているsuccessの使用についての意見はコメントにある通り、メソッドの話です。
うまくまとめているサイトがありました。
https://freelance-jak.com/technology/jquery/1276/

そしてもう一つ、
successをオプションとして渡すことよりdoneのほうがいい点については
successをオプションとして渡すとその中でしか処理を書けないので、doneでチェーンすれば、チェーンで次へ次へと書けるという点が挙げられます。
あるfetchをした後にべつのfetchをしたいという場合、doneのメソッド内でreturnで返せば次の処理を書けますが、successの使用ではどんどんネストするしかないためコールバック地獄と呼ばれるものになります。
まあ、でも基本的にはそんなコードを書くことはないので、その特徴さえ知っていれば(理解できているのであれば)特に気にしなくていいと思います。
もちろん、良い方法に合わせているほうが後からコード追加するときだとか開発中にスムーズにコードをかけるんですけど。
実際に開発初期に色々と整理していると、何も悩まずに開発ができるのでスムーズです。

Answer

まずjavascriptがjQueryに依存されているようです。
適切なjQueryライブラリを読み込んでください。
$.ajaxのsuccess処理は相当古い書き方で非推奨です。すくなくともdoneでチェーンしてください

なお基本XHRの処理はもうjQueryではなくfetchの方が一般的です。

実現したいこと

発生している問題・分からないこと

該当のソースコード

試したこと・調べたこと

上記の詳細・結果

補足

関連した質問