Fetch APIでJSON形式のデータを送信する

Fetch APIのAjaxを使ってJSON形式のデータを送信する

Fetch APIからJSON形式のデータを送信するときは以下のいずれかの方法から選ぶことができます。

• JSON形式のデータをそのまま送信する方法
• Form Dataオブジェクトに値をセットして送信する方法

どちらの方法を選択してもJSON形式のデータは送信できますが、使用する通信方式やサーバー側でデータを受け取る挙動が少しずつ異なってきます。
以降では、2種類の送信方法をそれぞれ解説していきます。

JSON形式のデータをそのまま送信する

以下の例ではあらかじめJSON形式のデータを変数dataに用意し、Fetch APIでサーバーサイドの「test.php」へ送信します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  // 送信するJSON
  let data = [
    {
      "title": "K331",
      "category": "Classic",
      "release_date": "2019-11-25"
    },
    {
      "title": "Paradise",
      "category": "Rock",
      "release_date": "2019-12-18"
    },
    {
      "title": "Baby",
      "category": "Pops",
      "release_date": "2020-01-07"
    }
  ];

  // Fetch APIでデータ送信
  fetch('/test.php', {　 // 送信先URL
    method: 'post', // 通信メソッド
    headers: {
      'Content-Type': 'application/json' // JSON形式のデータのヘッダー
    },
    body: JSON.stringify(data) // JSON形式のデータ
  })
  .then(response => response.text())
  .then(data => {
    console.log(data);
  });
});

送信先の「test.php」はJSON形式のデータを受け取った後、まずはjson_decode関数でJSON形式のデータをデコードしてPHPで処理できる配列形式に変換します。
このとき、POST通信でもグローバル変数「$_POST」からは値を参照できない点に注意してください。
その代わり、「php://input」より受け取ったデータを参照することができます。

受け取ったデータを変数$dataに入れた後、htmlspecialchars関数でサニタイズしてから変数$cleanに移します。
そのあとは値をvar_dump関数でそのまま出力したテキスト情報をレスポンスデータとして返します。

PHP コード例

<?php

$data = json_decode(file_get_contents('php://input'), true);
$clean = array();

if( $data ) {
  foreach( $data as $key => $value ) {

    $clean[$key] = array();

    foreach( $value as $c_key => $c_value ) {
      $clean[$key][$c_key] = htmlspecialchars( $c_value, ENT_QUOTES);
    }
  }
};

var_dump($clean);
return;

JavaScriptではレスポンスデータを受け取ると、2つ目のthenメソッドでコンソールに出力してデータを確認することができます。

JavaScript コード例

// Fetch APIでデータ送信
fetch('/test.php', {  // 送信先URL
  method: 'post', // 通信メソッド
  headers: {
    'Content-Type': 'application/json' // JSON形式のデータのヘッダー
  },
  body: JSON.stringify(data) // JSON形式のデータ
})
.then(response => response.text())
.then(data => {
  console.log(data);
});

コンソールに出力されるデータは以下のようになります。

コンソールの出力例

array(3) {
  [0]=>
  array(3) {
    ["title"]=>
    string(4) "K331"
    ["category"]=>
    string(7) "Classic"
    ["release_date"]=>
    string(10) "2019-11-25"
  }
  [1]=>
  array(3) {
    ["title"]=>
    string(8) "Paradise"
    ["category"]=>
    string(4) "Rock"
    ["release_date"]=>
    string(10) "2019-12-18"
  }
  [2]=>
  array(3) {
    ["title"]=>
    string(4) "Baby"
    ["category"]=>
    string(4) "Pops"
    ["release_date"]=>
    string(10) "2020-01-07"
  }
}

FormDataオブジェクトを使ってJSON形式のデータを送信する

FormDataオブジェクトを使う方法では、送信するデータをあらかじめFormDataオブジェクトにappendメソッドを使ってセットします。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  // 送信するJSON
  let data = [
    {
      "title": "K331",
      "category": "Classic",
      "release_date": "2019-11-25"
    },
    {
      "title": "Paradise",
      "category": "Rock",
      "release_date": "2019-12-18"
    },
    {
      "title": "Baby",
      "category": "Pops",
      "release_date": "2020-01-07"
    }
  ];

  // FormDataオブジェクトを作成してJSON形式のデータをセット
  let fd = new FormData();
  fd.append('data', JSON.stringify(data));

  // Fetch APIでデータ送信
  fetch('/test.php', {  // 送信先URL
    method: 'post', // 通信メソッド
    body: fd // JSON形式のデータをセットしたFormDataオブジェクト
  })
  .then(response => response.text())
  .then(data => {
    console.log(data);
  });

});

FormDataオブジェクトを使う方法の場合、データを受け取るPHPではPOSTメソッドのグローバル変数$_POSTからデータにアクセスすることができます。
実行する処理は先述したものと同じです。

PHP コード例

<?php

$data = json_decode($_POST['data']);
$clean = array();

if( $data ) {
  foreach( $data as $key => $value ) {

    $clean[$key] = array();

    foreach( $value as $c_key => $c_value ) {
      $clean[$key][$c_key] = htmlspecialchars( $c_value, ENT_QUOTES);
    }
  }
};

var_dump($clean);
return;

Fetch APIが受け取るレスポンスデータも全く同じです。

2つの方法の違いは通信方式がPOSTメソッドを使うかどうかによります。
FormDataオブジェクトを使う方法はPOSTメソッドを使うことが前提であれば送る側も、サーバーの受け取る側もデータのアクセス手順が手軽になります。
一方でJSON形式のデータをそのまま送信する方法では、やや手順が異なります。

ただ、いずれの方法もPOSTメソッド以外の通信方式を使うケースでは同じような手順になるため、使用する通信方式をPUTやDELETEで切り替えることが前提になる場合はどちらもあまり変わりがないため、自身が扱いやすい方法を選択します。