JavaScriptからPHPへのAPIリクエスト: POSTメソッドの実践ガイド

1. XMLHttpRequestを使った方法

JS側のコード

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

// POSTメソッドとAPIのエンドポイントを指定してリクエストを初期化
xhr.open('POST', 'https://your-server-endpoint.com/api', true);

// リクエストヘッダーを設定
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// リクエストの状態が変わったときのイベントハンドラを設定
xhr.onreadystatechange = function() {
    // リクエストが完了し、レスポンスが成功だった場合
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);  // レスポンスをコンソールに出力
    }
};

// 送信するデータを設定
var data = 'key1=value1&key2=value2';

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

PHP側のコード

<?php
// POSTデータを取得
$data = $_POST;

// レスポンスを作成
$response = array('message' => 'Data received!', 'data' => $data);

// レスポンスヘッダーを設定
header('Content-Type: application/json');

// JSON形式でレスポンスを出力
echo json_encode($response);
?>

2. Fetch APIを使った方法

JS側のコード

// Fetch APIを使用してPOSTリクエストを送信
fetch('https://your-server-endpoint.com/api', {
  method: 'POST', // メソッドを指定
  headers: {  // ヘッダーを設定
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({  // ボディにJSON形式のデータを設定
    key1: 'value1',
    key2: 'value2'
  })
})
// レスポンスをJSON形式で解析
.then(response => response.json())
// データをコンソールに出力
.then(data => console.log(data));

PHP側のコード

<?php
// 入力データを取得
$input = file_get_contents('php://input');

// JSONデータをデコード
$data = json_decode($input, true);

// レスポンスを作成
$response = array('message' => 'Data received!', 'data' => $data);

// レスポンスヘッダーを設定
header('Content-Type: application/json');

// JSON形式でレスポンスを出力
echo json_encode($response);
?>

3. FormDataを使った方法

JS側のコード

// FormDataオブジェクトを作成
var formData = new FormData();

// データを追加
formData.append("key1", "value1");
formData.append("key2", "value2");

// Fetch APIを使用してPOSTリクエストを送信
fetch('https://your-server-endpoint.com/api', {
  method: 'POST',  // メソッドを指定
  body: formData  // ボディにFormDataを設定
})
// レスポンスをJSON形式で解析
.then(response => response.json())
// データをコンソールに出力
.then(data => console.log(data));

PHP側のコード

<?php
// POSTデータを取得
$data = $_POST;

// レスポンスを作成
$response = array('message' => 'Data received!', 'data' => $data);

// レスポンスヘッダーを設定
header('Content-Type: application/json');

// JSON形式でレスポンスを出力
echo json_encode($response);
?>

結論

今回は、JavaScriptからPHPへのAPIリクエストをPOSTで送る方法について、3つの手法を中心に解説しました。それぞれの方法にはメリットとデメリットがありますので、実際のプロジェクトに合わせて適切な方法を選んでください。最後まで読んでいただき、ありがとうございます！

所感・感想

業務でAPIを作成している時にFetch APIを使って、
「あれ...APIリクエスト送信できてるのに、サーバー側で$_POSTにないぞ..!?」
となったのが今回記事を書いたきっかけです。
POSTリクエストは全部スーパーグローバルに入ると勝手に思ってました（笑）
一つ勉強になりました。めでたしめでたし！