非同期処理(ajax)

Ajaxのリクエスト送信(JS)

fetch APIのfetchメソッド

fetch(リクエスト先のURL, [オプション設定] )
.then((response) => response.json()) // 1度目の処理（レスポンス受信時）
.then((data) => {                    // 2度目の処理（1度目の処理完了時）
  処理
});

オプション設定の例

{
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(dispData) // JSON形式に変換
}
  • オプション設定
    1. 「どんなリクエストを送るか」をmethodで設定する
    2. 「どんなデータ形式で送るか」をheadersで設定する
    3. 「どんなデータを送るか」をbodyで設定する

Ajaxリクエストの取得(PHP)

  1. file_get_contents()関数によりAjaxリクエストを取得する
  2. json_decode()関数によりPHPで扱える連想配列に変換する

file_get_contents()関数

$データを格納する変数名 = file_get_contents('取得対象のファイル名');

通常はファイル名を渡しますが、PHPには特殊なキーワード 「php://input」 があります。これを指定すると、JavaScript側からのリクエストの本体部分（body）を取得可能です。 json_decode()関数

$変換後データの変数名 = json_decode($元データの変数名, true/false);

第2引数がtrueだと連想配列、falseだとオブジェクトとして変換されます。

Ajaxレスポンスの返却

Ajaxレスポンスの生成

// Ajaxレスポンスを生成（連想配列としてセット）
$response = [
    'message' => $data['name']
];

JavaScript側へAjaxレスポンスの送信

  1. header()関数によりデータの種類をJavaScript側に伝える
  2. json_encode()関数によりJSON形式に変換したデータを送信する

  3. echo を使ってJSにレスポンスを返却する。

  4. header()関数

header('Content-Type: application/json');
  • json_encode()関数
json_decode($送信するデータの変数名);
  • echo
echo json_decode($送信するデータの変数名);

$responseをJSON形式にして送信可能です。