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
1const form = document.querySelector("form");
2const formData = new FormData(form);
3const method = form.method.toUpperCase(); // フォームの method を取得 (大文字変換)
4const url = form.action
5
6if (method === "GET") {
7 const params = new URLSearchParams(formData).toString();
8 url += `?${params}`;
9}
10
11// fetch オプションを作成
12const options = { method };
13if (method === "POST") {
14 options.body = formData;
15}
16
17// fetch 実行（thenを使用）
18fetch(url, options)
19 .then(response => response.json())
20 .then(data => console.log(data))
21 .catch(error => console.error("Error:", error))
22 .finally(() => console.log("done"));
jQueryだとこんな感じ
(serializeArrayを使うように指示しました)
js
1const $form = $("form");
2const method = $form.attr("method"); // デフォルトは POST
3const url = $form.attr("action"); // `action` の URL を取得
4const data = $form.serializeArray();
5
6$.ajax({
7 url: url,
8 method: method,
9 data: data
10})
11.done(function(response) {
12 console.log(response);
13})
14.fail(function(jqXHR, textStatus, errorThrown) {
15 console.error("Error:", textStatus, errorThrown);
16})
17.always(function() {
18 console.log("done");
19});
jQueryでsuccessを使用する
js
1const $form = $("form");
2const method = $form.attr("method"); // デフォルトは POST
3const url = $form.attr("action"); // `action` の URL を取得
4const data = $form.serializeArray()
5
6$.ajax({
7 url: url,
8 method: method,
9 data: data,
10 success: function(response) {
11 console.log(response);
12 },
13 error: function(jqXHR, textStatus, errorThrown) {
14 console.error("Error:", textStatus, errorThrown);
15 },
16 complete: function() {
17 console.log("done");
18 }
19});
ちなみに、ほかの投稿で上がっているsuccessの使用についての意見はコメントにある通り、メソッドの話です。
うまくまとめているサイトがありました。
https://freelance-jak.com/technology/jquery/1276/
そしてもう一つ、
successをオプションとして渡すことよりdoneのほうがいい点については
successをオプションとして渡すとその中でしか処理を書けないので、doneでチェーンすれば、チェーンで次へ次へと書けるという点が挙げられます。
あるfetchをした後にべつのfetchをしたいという場合、doneのメソッド内でreturnで返せば次の処理を書けますが、successの使用ではどんどんネストするしかないためコールバック地獄と呼ばれるものになります。
まあ、でも基本的にはそんなコードを書くことはないので、その特徴さえ知っていれば(理解できているのであれば)特に気にしなくていいと思います。
もちろん、良い方法に合わせているほうが後からコード追加するときだとか開発中にスムーズにコードをかけるんですけど。
実際に開発初期に色々と整理していると、何も悩まずに開発ができるのでスムーズです。
Q&A
