Ajax json 配列 送信

AjaxでJSON配列をサーバーに送信する方法【サンプルコード付き】

JavaScriptのAjaxを用いて、JSON形式の配列データをサーバーに送信する方法を、サンプルコードと合わせてわかりやすく解説します。初心者の方でも理解できるように、基本的な概念から具体的な実装方法まで丁寧に説明します。

1. JSONと配列の基本

1.1 JSONとは

JSON（JavaScript Object Notation）は、データを表現するための軽量なフォーマットです。人間にとっても機械にとっても読みやすく、書きやすい構造をしています。JavaScriptのオブジェクトとよく似た構文で、データのやり取りに広く利用されています。

1.2 JSONのデータ構造

JSONでは、データは「キーと値」のペアで表現されます。キーは文字列で、値には以下のいずれかのデータ型を指定できます。

  • 文字列
  • 数値
  • 真偽値（true/false）
  • null
  • 配列
  • 別のJSONオブジェクト

1.3 配列

配列は、複数のデータを順番に格納するためのデータ構造です。JavaScriptでは、配列は角括弧（[]）で囲んで定義し、カンマで区切って複数の要素を格納できます。各要素には、任意のデータ型を指定できます。

1.4 サンプルコード


// JSONオブジェクトの例
const jsonObject = {
    "name": "太郎",
    "age": 20,
    "hobbies": ["読書", "映画鑑賞"]
};

// 配列の例
const array = ["りんご", "バナナ", "みかん"];

2. Ajaxの基本

2.1 Ajaxとは

Ajax（Asynchronous JavaScript and XML）は、Webページをリロードすることなく、サーバーと非同期にデータのやり取りを行うための技術です。JavaScriptを用いることで、ページの一部だけを更新したり、ユーザーの操作にインタラクティブに反応するなど、動的なWebページを実現できます。

2.2 XMLHttpRequestオブジェクト

XMLHttpRequestオブジェクトは、Ajax通信を行うためのJavaScriptの組み込みオブジェクトです。このオブジェクトを使って、HTTPリクエストの送信、レスポンスの受信などを行います。

2.3 GETリクエストとPOSTリクエスト

HTTPリクエストには、GETとPOSTなど、いくつかのメソッドがあります。

  • GETリクエストは、サーバーからデータを取得する場合に用いられます。URLの末尾にクエリパラメータとしてデータを追加して送信します。
  • POSTリクエストは、サーバーにデータを送信する場合に用いられます。リクエストボディにデータを含めて送信します。

2.4 サンプルコード


// XMLHttpRequestオブジェクトの作成
const xhr = new XMLHttpRequest();

// リクエストの設定（GETリクエスト）
xhr.open('GET', 'https://example.com/api/data');

// リクエストの送信
xhr.send();

// レスポンスの受信
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText);
    } else {
        console.error(xhr.statusText);
    }
};

3. JSON配列をAjaxで送信

3.1 JSON.stringify()メソッド

JSON.stringify()メソッドは、JavaScriptのオブジェクトや配列をJSON形式の文字列に変換するメソッドです。Ajaxでサーバーにデータを送信する際には、このメソッドを用いてデータを変換する必要があります。

3.2 POSTリクエストを用いた送信

JSON配列をサーバーに送信するには、POSTリクエストを用いるのが一般的です。リクエストヘッダーのContent-Typeに"application/json"を指定することで、サーバーにJSONデータであることを伝えます。

3.3 サーバーサイド(PHP)でのデータ受け取り方

サーバーサイドでは、$_POST変数ではなく、php://inputストリームからデータを読み取る必要があります。file_get_contents("php://input")関数でストリームの内容を取得し、json_decode()関数でPHPの配列に変換します。

3.4 サンプルコード

JavaScript(送信側)


const data = [
    { "name": "太郎", "age": 20 },
    { "name": "花子", "age": 18 }
];

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/data');
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.send(JSON.stringify(data));

xhr.onload = function() {
    // ...
};

PHP(受信側)


$data = json_decode(file_get_contents("php://input"), true);

// $dataはPHPの配列
foreach ($data as $item) {
    echo $item["name"] . ": " . $item["age"] . "\n";
}

4. 送信後の処理

4.1 レスポンスの受け取り

Ajaxリクエストを送信した後、サーバーからのレスポンスは、XMLHttpRequestオブジェクトのresponseTextプロパティまたはresponseプロパティで受け取ることができます。responseTextは文字列として、responseはJavaScriptオブジェクトとしてレスポンスデータを取得します。

4.2 JSON.parse()メソッド

サーバーからのレスポンスがJSON形式の場合、JSON.parse()メソッドを使用して、JavaScriptオブジェクトに変換できます。変換後のオブジェクトは、JavaScriptで自由に操作できます。

4.3 サンプルコード


// ...

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        const responseData = JSON.parse(xhr.responseText);
        console.log(responseData); // サーバーからのレスポンスデータ
    } else {
        // ...
    }
};

5. まとめ

本記事では、Ajaxを用いてJSON配列をサーバーに送信する方法について解説しました。JSON.stringify()メソッドで配列をJSON形式に変換し、POSTリクエストでサーバーに送信します。サーバーサイドでは、php://inputからデータを読み取り、json_decode()関数でPHPの配列に変換します。

関連情報

QA

Q1: JSON配列以外に、どのようなデータを送信できますか？

A1: JSON配列以外に、単一のJSONオブジェクト、文字列、数値、真偽値など、様々なデータを送信できます。送信するデータに合わせて、リクエストボディの形式やContent-Typeヘッダーの値を調整する必要があります。

Q2: サーバーサイドの言語はPHP以外でも大丈夫ですか？

A2: はい、PHP以外でも、Python、Ruby、Javaなど、様々なサーバーサイド言語でJSONデータを受け取ることができます。各言語のJSONパーサーを使用して、JSONデータをパースしてください。

Q3: Ajaxリクエストのエラー処理はどうすれば良いですか？

A3: XMLHttpRequestオブジェクトのonerrorイベントハンドラを使用して、エラー処理を実装できます。onerrorイベントは、ネットワークエラーやサーバーエラーが発生した場合に発生します。イベントハンドラ内で、エラーメッセージの表示やリトライ処理などを行うことができます。

その他の参考記事:jquery ajax json php