😉

PHPとJavaScriptの連携

2020/12/25に公開

JavaScript

概要

この記事ではPHPとJavaScript(以下JS)間でデータをやり取りする方法を説明します。
特にフレームワーク等は使わず、共にネイティブでの書き方を示します。

PHPからJSへのデータ渡し

最初に知っておくべきこととして、どんな順番でプログラムが実行されていくかを知ってください。

サーバーにリクエストが送られ、サーバサイドのPHPの処理が行われる
サーバーからHTMLファイルが返りページに埋め込まれたクライアントサイドのJSが実行される
その後、設定したタイミングでJSのwindow.onloadや各種イベントリスナなどが実行される

つまり、PHPは真っ先に実行されて埋め込まれた

<?php echo $hoge;?>

の様な処理命令を処理結果で置き換えてJSへ渡されます。
（ただし、ファイルの拡張子は.phpにして下さい）
例えば以下は、

PHP_to_JS.php

<script>
<?php
$hoge = "Test";
$piyo = "fuga";
?>
let hoge = "<?php echo $hoge; ?>";
let fuga = <?php echo "10+20"; ?>;
let piyo = <?php echo $piyo;?>*<?php echo $piyo;?>;
console.log(hoge);
console.log(fuga);
console.log(piyo);
</script>

これはサーバでPHPを処理されると、<?php ?>タグが置き換わり

PHP_to_JS_PHPexecuted.php

<script>
let hoge = "Test";
let fuga = 10+20;
let piyo = fuga*fuga;
console.log(hoge); //-> Test
console.log(fuga); //-> 30
console.log(piyo); //-> 900
</script>

と等価になります。
つまりPHPからJSは簡単ですね。
JSのコードに入れたい場所にPHPの変数をechoすれば良いのです。

JSからPHPへのデータ渡し(GET)

こっちはちょっと大変です。XMLHttpRequestクラスと言うJSの仕組みを使います。
これは簡単に言うとJSから外部ファイルを取得する仕組みで、PHPファイルの取得はもちろん、画像とか音声ファイルなんかも扱えます。（動画はどうなんかな？）
本当はエラーの対応などもっと複雑になりますが、とにかく動く骨組みを示します。
まずはGET通信の方から、以下ではGET変数

$_GET['hoge'] = 123

をXHR_GET_receiver.phpへ送っています。

XHR_GET.html

<script>
	let xhr = new XMLHttpRequest();

	//openの第三引数は非同期(true)で行うと言う指定
	xhr.open("GET","./XHR_GET_receiver.php?hoge=123",true); 
	xhr.responseType = "text"; //結果をテキスト形式で取得
	xhr.addEventListener('load', function(event){
		console.log(xhr.response); //->本来のメインの出力
		console.log(event.target.response); //->イベントにも入る
	});
	xhr.send(null);
</script>

ここで必ずaddEventListenerで読み込み完了を待つ為のトリガを設定した後でxhr.sendを行ってください。でないと、先にsendが完了してしまう場合が起こると、トリガが登録される前にsendが完了してしまいイベントが発火しません。sendの引数はGETの場合nullです。そうしてリクエストをPHPに送った後、結果が返ってきてxhrがロードされたらコンソールへの出力をします。

一方、リクエストを受け取るPHPファイルは凄く簡単です。
出力したいものをechoなどで出力すれば、それがxhr.responseに入ります。
おまけにイベントリスナで発生したイベントeventからも出力は取得可能です。

XHR_GET_receiver.php

<?php
echo "It works!!".$_GET['hoge'];

この２ファイルからでる出力はブラウザのコンソールに次の様になります。

It works!!123
It works!!123

JSからPHPへのデータ渡し(POST)

では、POST送信の方も見てみましょう。POSTではFormDataクラスを使います。
先ほどはテキスト形式で値を受けとりましたが、今回はJSON形式で受け取ってみましょう。

XHR_POST.html

<meta charset="utf-8" />
<script>
	let xhr = new XMLHttpRequest();
	xhr.open('POST', './XHR_POST_receiver.php', true);
	xhr.responseType = 'json'; //JSON形式で取得
	xhr.addEventListener('load', function(event) {
		console.log(xhr.response.his_name);
		console.log(xhr.response.num);
	});
	let fd = new FormData();
	fd.append("name","ギュスターヴ");
	fd.append("number","XIII");
	xhr.send(fd);
</script>

今回はxhr.responseTypeでJSON形式での取得することにしました。
FormDataクラスはPOST送信を行う時のデータの格納手段を与えてくれます。
これをxhr.send()の引数に渡せばよいです。後は、
先ほど同様、イベントリスナが発火するのを待ちましょう。

一方、リクエストを受ける側は、

XHR_POST_receiver.php

<?php
$array = array();

$array["his_name"] = $_POST['name'];
$array["num"] = $_POST['number'];

echo json_encode($array);

の様に

$_POST['name']

等でデータを受け取れます。
ここで、データベースアクセスなんかも可能です。
json_encode()は非常に便利なので、是非使ってください。
これにより、配列$arrayから簡単にJSONへの成型＋エンコーディングが実行できます。
コンソールへの出力は

ギュスターヴ
XIII

となります。

今日はここまで。お疲れさまでした。

概要

PHPからJSへのデータ渡し

JSからPHPへのデータ渡し(GET)

JSからPHPへのデータ渡し(POST)

Discussion