【jQuery】ajaxメソッドでJSON形式データを送信する

今回は、jQueryの「ajax」メソッドを使用してJSON(JavaScript Object Notation)形式データを送信する方法について紹介していきます。

jQuery.ajax() | jQuery API Documentation
スポンサーリンク

検証環境

検証に使用した環境/ライブラリを次に記載します。

  • jQuery
    • バージョン:3.6.0

使用方法

「ajax」メソッドを使用してJSON形式データを送信するためには、少なくとも次の値を指定する必要があります。

  • 「contentType」に「application/json」を指定する。
  • 「data」に「JSON形式データ」を指定する。

値を指定したプログラム例は、次のようになります。

【プログラム例】

$(function () {
  var data = JSON.stringify({
    code: "xxxx"
  });
  $.ajax({
    method: "POST",
    url: "https://example.com",
    data: data,
    contentType: "application/json"
  }).done(function (data, textStatus, jqXHR) {
    console.log(data);
  });
});

【contentType】

「contentType」は、HTTPリクエストヘッダの「Content-Type」に指定する値です。

JSON形式データを送信する場合は、「application/json」を指定します。指定しない場合は、「application/x-www-form-urlencoded; charset=UTF-8」になります。

【data】

「data」は、HTTPリクエストボディに指定する値です。

JSON形式データを送信する場合は、JSON形式の文字列を指定します。

プログラム例では、「JSON.stringify」を使用してJSON形式データを作成しています。メソッドの詳細については、次のドキュメントも参考にしてください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

まとめ

JSON形式データを送信するときは、次のパラメータが設定されていることを確認してください。

  • 「contentType」に「application/json」を指定する。
  • 「data」にJSON形式の文字列(JSON.stringifyなどで作成する)を指定する。

参考資料

プログラム例を使用した動作デモは、以下のサイトから確認することができます。

jQuery ajax example