JavaScriptでJSONデータをPOSTするベストプラクティス

2024-04-10

Fetch API で JSON データを POST する方法

Fetch API は、JavaScript でネットワークリクエストを行うための標準的な API です。この API を使って、JSON データをサーバーに送信することができます。

手順

fetch() 関数を使い、リクエストを作成します。
リクエストのヘッダーに Content-Type を application/json に設定します。
リクエストボディに、JSON データを文字列として設定します。

const data = {
  name: "John Doe",
  email: "[email protected]",
};

const options = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
};

fetch("/api/users", options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

解説

data 変数に、送信する JSON データを格納します。
options 変数に、リクエストの設定を格納します。
- method プロパティは、リクエストメソッドを指定します。この場合は POST メソッドです。
- headers プロパティは、リクエストヘッダーを指定します。この場合は Content-Type ヘッダーを application/json に設定しています。
- body プロパティは、リクエストボディを指定します。この場合は、JSON.stringify() 関数を使って JSON データを文字列に変換しています。
then() メソッドを使って、レスポンスを処理します。
- 1つ目の then() メソッドは、レスポンスの JSON データを取得します。

補足

上記のコードは、基本的な例です。必要に応じて、エラー処理などを追加してください。
fetch() 関数は、非同期処理です。そのため、レスポンスを処理するコードは、then() メソッド内で記述する必要があります。

関連用語

JavaScript
JSON
Fetch API
POST メソッド
リクエストヘッダー
リクエストボディ
非同期処理

上記のコードは、動作確認済みです。

// 送信するJSONデータ
const data = {
  name: "John Doe",
  email: "[email protected]",
};

// リクエストオプション
const options = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
};

// リクエスト送信
fetch("/api/users", options)
  .then((response) => {
    // レスポンスステータスコードをチェック
    if (response.ok) {
      // 成功した場合の処理
      console.log("送信成功");
    } else {
      // 失敗した場合の処理
      console.log("送信失敗:", response.status);
    }
  })
  .catch((error) => {
    // エラー発生時の処理
    console.log("エラー:", error);
  });

then() メソッドを使って、レスポンスを処理します。

Fetch API 以外で JSON データを POST する方法

XMLHttpRequest は、従来のブラウザでネットワークリクエストを行うための API です。Fetch API よりも古い API ですが、多くのブラウザでサポートされています。

// 送信するJSONデータ
const data = {
  name: "John Doe",
  email: "[email protected]",
};

// リクエストオブジェクトを作成
const xhr = new XMLHttpRequest();

// リクエストの設定
xhr.open("POST", "/api/users");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));

// レスポンス処理
xhr.onload = function() {
  if (xhr.status === 200) {
    // 成功した場合の処理
    console.log("送信成功");
  } else {
    // 失敗した場合の処理
    console.log("送信失敗:", xhr.status);
  }
};

// エラー処理
xhr.onerror = function() {
  console.log("エラー:", xhr.statusText);
};

jQuery は、JavaScript のライブラリです。$.ajax() メソッドを使って、簡単に JSON データを POST することができます。

// 送信するJSONデータ
const data = {
  name: "John Doe",
  email: "[email protected]",
};

// リクエスト
$.ajax({
  url: "/api/users",
  method: "POST",
  contentType: "application/json",
  data: JSON.stringify(data),
  success: function(data) {
    // 成功した場合の処理
    console.log("送信成功");
  },
  error: function(xhr, status, error) {
    // 失敗した場合の処理
    console.log("送信失敗:", xhr.status);
  },
});

Axios は、JavaScript の HTTP クライアントライブラリです。Fetch API よりも使いやすく、多くの機能を提供しています。

// 送信するJSONデータ
const data = {
  name: "John Doe",
  email: "[email protected]",
};

// リクエスト
axios.post("/api/users", data)
  .then((response) => {
    // 成功した場合の処理
    console.log("送信成功");
  })
  .catch((error) => {
    // 失敗した場合の処理
    console.log("送信失敗:", error.response.status);
  });