jQueryのpost()メソッドでPOSTリクエストを送信する方法を徹底解説

Webアプリケーションを開発していると、ユーザーが入力したデータをもとに何かを作成する処理は避けて通れません。たとえば、サインアップフォームから送信された情報で新しいユーザーアカウントを作成したり、レシピ管理アプリで新しいレシピを登録したりするケースが挙げられます。フォームに入力されたデータから、データベースに保存された新しいレシピのインスタンスを作るまでには、HTTP POSTリクエストが必要です。

POSTリクエストは、フォームのデータをサーバーへ送信し、バックエンドやAPIで処理してデータベースに保存するための仕組みです。デフォルトでは、フォームを送信するとページのリダイレクトや再読み込みが発生します。小規模なアプリであれば問題ありませんが、より快適なユーザー体験を提供するためには、このデフォルトの動作を上書きする必要があります。

jQueryのpost()を使えば、HTTPリクエストの送信、レスポンスの取得、データの表示方法の制御まで、リダイレクトや再読み込みなしに行えます。ここでは、post()がどのように機能するのか詳しく見ていきましょう。

post()メソッドの仕組み

HTTPリクエストはキャッチボールに例えると分かりやすいでしょう。ブラウザがAPIエンドポイント経由でサーバーにリクエストを投げ、サーバーがレスポンスを返します。post()の役割は、アプリのデータベースに作成・保存されるデータをエンドポイントへ送信することです。

これらを踏まえると、post()は何らかの引数を受け取ると推測できますよね？その通りです！post()は最大4つの引数を受け取れますが、ここでは特に重要な2つ、つまり送信先のURLと、そのURLに送信するデータに焦点を当てます。

$.post('/recipes', data)

レシピ管理アプリの例で説明すると、まずjQueryセレクタの$から始めます。post()メソッドを呼び出すことで、データを'/recipes'というURLに送信しています。ここまでは順調です。サーバーにデータを投げることができました。次はレスポンスを受け取る準備をしましょう。

レスポンスとして返ってくるのは、Promiseインターフェースを実装したjqXHR（jQuery XHR）オブジェクトです。難しそうに聞こえるかもしれませんが、要するにレスポンスはただのオブジェクトだということです。jQueryの便利なdone()メソッドを使えば、このオブジェクトを読みやすい形式に整理できます。

キャッチボールの例えで続けると、post()でサーバーにデータを投げ、返ってきたjqXHRオブジェクトをdone()に渡すことで、受け取った中身を確認できるわけです。それでは、実際の使い方を見ていきましょう。

jQuery post()の実装例

まず、シンプルなHTMLフォームを用意します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<h2>
  New Recipe
</h2>
<form id='new-recipe'>
<label for="name">Recipe Name</label><br>
<input type="text" name="name" id="name"><br>
<label for="ingredients">Ingredients</label><br>
<input type="text" name="ingredients" id="ingredients"><br>
<button type="submit">
Create Recipe 
</button>
</form>

このコードを表示すると、次のようなフォームになります。

デフォルトでは、submitボタンがクリックされると、ブラウザは再読み込みまたはリダイレクトを行います。しかし、ページが再読み込みされるとフォームのデータはすべて失われてしまいます。このリダイレクトによるデータ損失を防ぐために活躍するのが、JavaScriptのpreventDefault()メソッドです。

<script>
  $(document).ready(() => {
    $('#new-recipe').submit((event) => {
      event.preventDefault();
    })
  })

</script>

このコードでは、ページ（document）の読み込みが完了するのを待ち、idがnew-recipeのフォームでsubmitボタンがクリックされるのを監視しています。これは.submit()メソッドを使って実現しており、クリックイベントを引数に取るコールバック関数を渡しています。補足すると、JavaScriptのコールバック関数とは、別の関数に引数として渡し、後で実行される関数のことです。

このコールバック関数の中で、preventDefault()を使えばデフォルトのリダイレクトを止められます。これでリダイレクトされなくなり、サーバーへのデータ送信を始められる状態になりました。

post()を呼び出してデータを送信する前に、送信するデータが必要です。では、そのデータはどこから取得するのでしょうか？

答えはフォームです。リダイレクトされなくなったおかげで、フォームのテキスト入力欄の値にアクセスできます。ところで、serialize()メソッドは何をしているのでしょうか？

serialize()メソッドは、thisキーワードで選択したフォームに対して呼び出されます。serialize()は、フォームのデータを標準的なURLエンコード形式のテキスト文字列に変換し、サーバーに送信できるようにします。

フォームデータを適切にシリアライズしたら、変数に格納します。

  $(document).ready(() => {
    $('#new-recipe').submit((event) => {
      event.preventDefault();
     var values = $(this).serialize();
    })
  })

データがvalues変数に格納されたので、いよいよサーバーに送信できます！

  $(document).ready(() => {
    $('#new-recipe').submit((event) => {
      event.preventDefault();
     var values = $(this).serialize();
     var posting = $.post('/recipes', values);
    })
  })

post()がjqXHRオブジェクトを返すことを覚えていますか？このオブジェクトも変数に保存し、done()を呼び出せば、レスポンスを展開してクライアント側で自由に処理できます。

$(document).ready(() => {
    $('#new-recipe').submit((e) => {
      e.preventDefault();
      var values = $(this).serialize();
      var posting = $.post('/recipes', values);
      posting.done( (data) => {
        var recipe = data;
        $('.recipes').text(recipe["name"]);
        $('.recipes').text(recipe["ingredients"]);
      })
    })
  })

受信したデータを読みやすい変数recipeに格納すれば、レシピ名や材料の属性にアクセスできます。この例では、これらの属性をclassがrecipesの<div>要素に挿入しています。

まとめ

今回は多くの内容を学びました。締めくくる前に、簡単におさらいしておきましょう。

post()の一般的な使い方は、.submit()の中でコールバック関数として利用することです。.submit()はフォーム自体に対して呼び出されるため、JavaScriptのthisキーワードでフォーム内のすべてのデータを参照し、serialize()でシリアライズできます。シリアライズしたデータを変数（通常はvaluesという名前）に格納したら、post()を使ってその値を宛先URLに送信します。

post()が返すjqXHRオブジェクトを変数（一般的にはposting）に保存しておくのは良い習慣です。そのposting変数に対して便利なdone()メソッドを呼び出せば、サーバーから返されたデータにアクセスできます。あとは、そのデータをユーザーにどう表示するかはあなた次第です。

post()という複雑なプロセスをマスターできた自分を褒めてあげましょう！自分のアプリを構築するこの段階に来たら、エラーは起こるものだと心得て、冷静にデバッグすることが大切です。