https://idea-hack.com/courses/understand-how-to-handle-data-using-fetch-method-of-javascript/lessons/understand-how-to-send-json-format-data-to-the-outside-using-the-fetch-method-of-javascript/
https://idea-hack.com/courses/understand-how-to-handle-data-using-fetch-method-of-javascript/lessons/understand-how-to-send-json-format-data-to-the-outside-using-the-fetch-method-of-javascript/

JavaScriptのfetch()メソッドを使ってJSONフォーマットのデータを外部に送信する方法を理解しよう

fetch()メソッドでデータを外部に送信したい

WEBサーバーのプログラムにデータを送信したい時はfetch()メソッドを利用できます。

データ送信方法は2つあります。

送信方式

GET方式

WEBコンテンツのURLに「?key=value」のような文字が入ったURLを見かけたことがあると思います。URLにパラメーターを付与する方式をGET方式といいます。

簡単に実装できる反面、URLに送信情報が載ってしますので、ユーザーデータを扱う場面では利用できません。

POST方式

GETに比べ工数が多いですが、URLに情報が残らないので、ユーザーデータを扱う場面ではこちらを使います。またHTTPSプロトコルで通信している限りはPOSTの中身は第三者に見えません。

ただし、GET方式に比べて工数と必要な知識が多いです。

今回はPOST方式で解説を進めます。

POSTで送信する場合は以下を指定します。

  • method・・・’POST’または’GET’
  • headers・・・ ‘Content-Type’:’application/json’など
  • body・・・[送信内容]

メソッド

メソッド意味返り値
fetch(URL, [送信データ])第二引数が空の場合はURLからデータを取得
第二引数に[送信データ]を指定すると、指定したURLにデータを送信する
Promise
Promiseの仕様

サンプルコード

今回はJSONフォーマットサーバーにデータを送信する方法を見ていきます。(application/json方式)

送信コードのサンプルは下記になります。

Output
送信されたJSONデータ
Pug
table.table
			tbody
				tr
					th 送信されたJSONデータ
					td#targetText
JavaScript



const targetText = document.getElementById("targetText");

const targetObj = {hello: 'world'};

const targetData = {
	method: 'POST',
	headers: {
		'Content-Type': 'application/json'
	},
	body: JSON.stringify(targetObj) //データは文字列かオブジェクトのみです。ここでは文字列データとしてJSONを送信します
}

const fetchedData = fetch('./', targetData);
fetchedData.then((value) => {
  return value.text();
})
	.then((response) => {
	targetText.textContent = '送信成功';
  //console.log('Success:', JSON.stringify(response));
})
	.catch((error) => {
	targetText.textContent = '送信失敗';
  //console.log('Error:', JSON.stringify(error));
});

JSONフォーマットでサーバーにデータを送信するにはfetch()メソッドの第二引数にオプションを指定します。データを送信したら、サーバーからのレスポンスを受け取レます。そのレスポンスの内容によって異なる文字列をページ上に表示しています。

実際のレスポンスデータを参照したい場合はconsole.logを使って実際のリクエストデータをConsole上に出力してください。

データはサーバーに送信されます。プログラム言語によって送信されたデータの扱い方は異なりますが、PHPではfile_get_contents(‘php://input’)メソッドを使って、入力値を受け取ります。

この段階では、文字列として受け取っているので、文字列をPHPでJSONデータに変換する必要があります。json_decode()メソッドを使って変換します。

PHP
<?php
$json_string = file_get_contents('php://input');

//PHPで文字列をJSONデータとして展開する
$jsonObj = json_decode($json_string);

echo $jsonObj->{"hello"};
?>
インストラクター