JavaScript | PHPファイルを読み込む方法

2022-02-132022-09-07JavaScript ファイル・ディレクトリ,JavaScript

JavascriptでXMLHttpRequest()メゾッドを利用してPHPファイルを実行して読み込む方法を紹介しています。

PHPファイルを読み込む

JavascriptのXMLHttpRequest()メゾッドを使ったPHPファイルの読み込みサンプルコードです。

PHPは動作テスト用にシンプルな「sample.php」として以下のPHPを配置します。

<?php
echo 'PHP';

上記の「sample.php」をJavascriptから実行して結果を読み込むサンプルコードになります。

let xhr = new XMLHttpRequest();
xhr.open('GET', `sample.php`, true);
xhr.addEventListener('load', function () {
	console.log(this.response);
});
xhr.send();

// PHP

読み込み先のPHPの場所が別ドメインで、かつCORSの設定をしていない場合は以下のエラーが表示されます。

Access to XMLHttpRequest at 'https://' from origin 'https://' has been blocked by CORS policy: No 'Access-Control-Allow-Origin’ header is present on the requested resource.

GETパラメータを付与する

GETパラメータはそのままファイル名に記述する事で付与する事が可能です。

let xhr = new XMLHttpRequest();
xhr.open('GET', `sample.php?mode=1&type=a`, true);
xhr.addEventListener('load', function () {
	console.log(this.response);
});
xhr.send();

POSTパラメータを付与する

POSTパラメータFormData()コンストラクターを利用する事で簡単に付与する事が可能です。

let xhr = new XMLHttpRequest();
xhr.open('POST', `sample.php`, true);
xhr.addEventListener('load', function () {
	console.log(this.response);
});

let post_data = new FormData();
post_data.append('mode', 1);
post_data.append('type', 'b');
xhr.send(post_data);