【jQuery】$.post()でPOSTリクエストを送信する完全ガイド｜JSON送信・エラーハンドリング・フォーム送信・fetch比較まで

jQueryの $.post() を使うと、ページをリロードせずにサーバーへデータを送信できます。この記事では基本的なPOST送信・JSON送信・フォームデータの非同期送信・エラーハンドリング・Fetch APIとの比較まで解説します。

$.post() の基本的な使い方

// $.post(url, data, callback)
$.post('/api/save', { name: '山田太郎', age: 30 }, function (response) {
  console.log('レスポンス:', response);
});

// Promiseチェーンで書く（推奨）
$.post('/api/save', { name: '山田太郎', age: 30 })
  .done(function (data) {
    console.log('成功:', data);
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
    console.error('エラー:', textStatus, errorThrown);
  })
  .always(function () {
    // 成功・失敗に関わらず実行
    console.log('通信完了');
  });

JSONデータをPOSTする

デフォルトの $.post() は application/x-www-form-urlencoded 形式で送信します。JSON形式で送りたい場合は $.ajax() を使います。

// JSONをPOSTする場合は $.ajax() を使う
$.ajax({
  url:         '/api/save',
  type:        'POST',
  contentType: 'application/json',
  data:        JSON.stringify({ name: '山田太郎', age: 30 }),
  dataType:    'json'
})
  .done(function (data) {
    console.log('成功:', data);
  })
  .fail(function (jqXHR) {
    console.error('エラー:', jqXHR.status, jqXHR.responseText);
  });

フォームを非同期（Ajax）で送信する

<form id="contact-form">
  <input type="text" name="name" placeholder="お名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <textarea name="message" placeholder="メッセージ"></textarea>
  <button type="submit">送信</button>
</form>
<p id="form-message"></p>

$(function () {
  $('#contact-form').on('submit', function (e) {
    e.preventDefault(); // 通常の送信をキャンセル

    var $btn = $(this).find('button[type=submit]');
    $btn.prop('disabled', true).text('送信中...');

    $.post('/api/contact', $(this).serialize())
      .done(function (data) {
        $('#form-message').text('送信が完了しました').css('color', 'green');
        $('#contact-form')[0].reset(); // フォームをリセット
      })
      .fail(function (jqXHR) {
        var msg = jqXHR.status === 422
          ? '入力内容に誤りがあります'
          : '送信に失敗しました。しばらくしてから再度お試しください';
        $('#form-message').text(msg).css('color', 'red');
      })
      .always(function () {
        $btn.prop('disabled', false).text('送信');
      });
  });
});

エラーハンドリングの詳細

$.post('/api/save', { name: '山田' })
  .done(function (data, textStatus, jqXHR) {
    console.log('ステータス:', jqXHR.status); // 200
    console.log('データ:', data);
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
    switch (jqXHR.status) {
      case 400: console.error('不正なリクエスト'); break;
      case 401: console.error('認証が必要です'); break;
      case 403: console.error('アクセス権限がありません'); break;
      case 404: console.error('エンドポイントが見つかりません'); break;
      case 422: console.error('バリデーションエラー'); break;
      case 500: console.error('サーバーエラー'); break;
      default:  console.error('予期しないエラー:', jqXHR.status);
    }

    // レスポンスがJSONの場合はパースして詳細を取得
    try {
      var errData = JSON.parse(jqXHR.responseText);
      console.error('エラー詳細:', errData.message);
    } catch (e) {}
  });

$.post() / $.ajax() / fetch() の使い分け

新規プロジェクトや jQuery を使わない環境では fetch() + async/await が現代標準です。

まとめ

jQueryでPOSTリクエストを送信する際のポイントをまとめます。

• 基本: $.post(url, data) → .done()/.fail()/.always()
• JSON送信: $.ajax({ contentType: "application/json", data: JSON.stringify(...) })
• フォーム: $(form).serialize() でシリアライズ → ボタン無効化で二重送信防止
• エラー: ステータスコード別に分岐 → jqXHR.responseText で詳細取得

関連記事: GETリクエストを送信する方法 / JSONデータを取得する方法 / フォームバリデーション完全ガイド

よくある質問（FAQ）