LAMP環境でWEBシステムを構築していると、しばしばJavascriptとPHPでそれぞれ扱っているデータをやり取りしたくなる時がある。
例えば、サーバーに保存されているデータをブラウザでうまく受け取りたい時や、
ブラウザで操作されたユーザーの行動データをPHPに受け渡したい時、
POST送信や画面遷移をさせずに、javascriptからPHPにデータを受け渡したい場合などの方法は、かなり初歩的だが、やったことの無い人の無いために、僕のやり方をソースコードで公開しておきます。
環境
ファイル一覧と役割
# ブラウザ表示用HTMLソース
index.html
# index.htmlに読み込むjavascriptプログラム
common.js
# 受け渡しを行なうPHPプログラム
collabo.php
# PHPプログラムから参照されるデータファイル
data.txt
上記の非常に簡易な構成を基準に、下記のシナリオを実行してみたいと思います。
プログラム・シナリオ
- 「JavascriptからPHPへデータ送信」index.htmlをブラウザで表示した時に、data.txtに書かれている任意の値を表示する
- 「PHPからjavascriptへデータ送信」ブラウザ上の入力フォームに書かれたデータをページ遷移させずにdata.txtに追記する
ソースコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PHP Collaboration</title>
<script type="text/javascript" src="common.js"></script>
</head>
<body>
<form name="form1">
<input type="text" name="test">
<button type="button" id="btn">送信</button>
</form>
<div id="list"></div>
</body>
</html>
window.onload = function(){
// data-write
var btn = document.getElementById("btn");
btn.onclick = function(){
var input = document.forms.form1.test;
var requests = "message="+input.value;
var url = "./collabo.php?mode=write";
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
xhr.send(requests);
xhr.onreadystatechange = function(){
if(this.readyState === 4){
var list = document.getElementById("list");
list.innerHTML += "<div>"+this.responseText+"</div>";
document.forms.form1.test.value = "";
}
};
};
// data-read
var url = "./collabo.php?mode=read";
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
xhr.send();
xhr.onreadystatechange = function(){
if(this.readyState === 4){
var datas = this.responseText.split("\n");
var html = "";
for(var i=0; i<datas.length; i++){
html += "<div>"+datas[i]+"</div>";
}
var list = document.getElementById("list");
list.innerHTML = html;
}
};
};
<?php
if($_REQUEST["mode"] === "write"){
$num = 1;
if(is_file("data.txt")){
$data = explode(PHP_EOL , file_get_contents("data.txt"));
$num = count($data);
}
file_put_contents("data.txt" , $num.",".$_REQUEST["message"].PHP_EOL , FILE_APPEND);
echo $num.",".$_REQUEST["message"];
}
else if($_REQUEST["mode"] === "read"){
echo file_get_contents("data.txt");
}
1,abc
2,def
3,ghi
JavascriptからPHPへデータ送信の解説
「送信」ボタンをクリックすると、Javascriptからajax処理でPHPにデータを送信します。
受信したPHPは、そのデータをdata.txtに書き込む処理を行なう。
common.jsの「// data-write」の箇所がその処理になります。
この処理で同時に行うべき内容は、入力した文字列を送信後に項目内をクリアしなければいけません。
そうすることで、次の入力をスムーズに行えるようになります。
また、送信したデータが正常にサーバーに送られた後で、PHP側で、ファイルに書き込んだ内容を返すことで、HTMLページ内のテキストファイル内容を表示に繁栄します（追記）。
PHPからjavascriptへデータ送信の解説
ページを読み込んだらすぐにPHPで読み取ったdata.txtファイルの内容をjavascriptに送ります。
※ただechoするだけですが・・・
javascriptでは、データを全て受け取りますが、単なる文字列なので、データのレコードを改行単位で行なっている仕様を繁栄して、改行を配列に分解します。
その後、divタグで配列のそれぞれをラップして、id="list"の内部に書き込みます。
つまずきポイント
今回はChromeブラウザの最新版（63.0.3239.84）で確認していますが、ブラウザ互換が必要な人、IEや他のブラウザが必須という人は、ajax処理の箇所をjQueryを使うか、以前記事のajaxプログラムを利用してください。
[Javascript] Ajaxライブラリ
ちなみに、このプログラムを少しだけ改良すると、簡易な掲示板が作れるので、初心者の方がWEBシステム開発を行うサンプルとしてご利用ください。
