JavaScript - fetch()とthen()でPHPファイルにアクセスする

JavaScriptでfetch().then()を利用してPHPファイルにアクセス、返り値を取得する方法と簡単なコード例です。

HMLには送信ボタンを設置しています。

<button type="button" id="post-btn">POST Button</button>

addEventListener()で送信ボタンをクリックした時のイベントを実装しています。

new FormData()をつかて送信データを作成、fetch()とthen()でPHPファイルに送信しています。

コード例では、サイトのindex.phpにアクセスして、ページ内容を返り値として取得、コンソールログに表示しています。

// ボタンをクリックした時のイベント
document.querySelector('#post-btn').addEventListener("click", function () {

	// POSTデータの作成
	const formData = new FormData();
	formData.append('parameter1', 'data1');
	formData.append('parameter2', 'data2');

	// PHPファイルにアクセスする
	fetch('/index.php', {
		method: 'POST',
		body: formData
	})
		.then(response => {
			if (response.ok) {
				return response.text();
			}
			throw new Error('応答がありません。');
		})
		.then(data => {
			// 返り値を受け取る
			console.log(data);
		})
		.catch(error => {
			console.error(error);
		});
		
});