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

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の仕様

今回はフォーム形式でデータをサーバーに送信する方法を見ていきます。この方式を採用することにより、ユーザー入力して送信されたデータを受け取って処理する時と同じように配信データを扱うことができるので便利です。

 フォーマットは2つあります。

送信フォーマットの解説

multipart/form-data方式

主に画像や添付ファイルなどの、ないなりデータを送信する際に使用されるフォーマットです。

application/x-www-form-urlencoded方式

「[キー1=値1&キー2=値2&…]」という形でキーと値のペアをサーバーに送信します。日本語などのマルチバイト文字は使用できないのでURLエンコードをした上でサーバーに送信します。

サンプルコード

multipart/form-data方式

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

Output
データ送信状況
Pug
table.table
			tbody
				tr
					th データ送信状況
					td#targetText
JavaScript
const targetText = document.getElementById("targetText");

const targetBody = new FormData();
targetBody.set('hello', 'world');

//Content-Typeの値はmultipart/form-data方式では自動で振られるので設定しない方が良い
const targetData = {
	method: 'POST',
	body: targetBody
};

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では下記のように出力できます。

PHP
<?php 
echo $_POST["hello"];
?>

application/x-www-form-urlencoded方式

Output
データ送信状況
Pug
table.table
			tbody
				tr
					th データ送信状況
					td#targetText2
JavaScript
const targetText2 = document.getElementById("targetText2");

const targetParams = new URLSearchParams();
targetParams.set('hello', 'world');

//Content-Typeの値はmultipart/form-data方式では自動で振られるので設定しない方が良い
const targetData2 = {
	method: 'POST',
	body: targetParams,
	headers: {
		'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
	}
};

const fetchedData2 = fetch('./', targetData2);
fetchedData2.then((value) => {
  return value.text();//データはただの文字列なのでテキストとして解析
}) 
	.then((response) => {
	targetText2.textContent = '送信成功';
  //console.log('Success:', JSON.stringify(response));
})
	.catch((error) => {
	targetText2.textContent = '送信失敗';
  //console.log('Error:', JSON.stringify(error));
});

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

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

データはサーバーに送信されます。プログラム言語によって送信されたデータの取得コードは異なりますが、PHPでは下記のように出力できます。

PHP
<?php 
echo $_POST["hello"];
?>
インストラクター