2020年2月20日 : してログ

[JavaScript] PHPからデータを受け渡す方法

JavaScriptPHP 2020年2月20日

PHP + JavaScript でシステムを組む場合、PHP 側の設定値を JavaScript 側に渡したいときがあります。いくつも方法があり簡単ではありますが、どうもスマートでないやり方になってしまうのでどうにかしたいと思っていました。

代表的な方法は、テンプレートエンジンに埋め込む（JavaScript を埋め込むか、input タグに入れる、class 属性などに突っ込む）、ajax で json を取得させるなどがあります。前者はカッコ悪いの一言。後者は非同期通信になってロード完了するまで、それらの値にアクセスできないなどイマイチです。そこで少し検討してみました。

JavaScript を吐き出す PHP を書いてしまう

JavaScript のコードを吐き出す PHP を書いて、ヘッダーの script タグでロードするという方法です。これならテンプレートが複雑にならないし、ロードのタイミングで悩むこともありません。ただし、PHP 側のコードが汚くなるのが目に見えるので、もう少し検討してみました。

せっかくなので JSON を受け渡しに使いたい

PHP 側で JSON を作り JavaScript 側は ajax で受け取る、この流れ少し変えて JSON データをデコードするだけの JavaScript を書いてロードしてもらう、というふうにします。

  1. PHP で受け渡したいデータを配列などにまとめる
  2. データを JSON にエンコードして base64 エンコードする（エスケープしなくて良くするため）
  3. JavaScript で base64 → JSON の順でデコードするコードに加工する
  4. JavaScript として返却する

このような流れでコードを書けば、PHP、JavaScript でコードが入り乱れることは無くなり非常にすっきりすると思います。簡単なのでコードを例示する必要も無いかと思いますが、一応書いておきます。

PHP 側のコード（$data に受け渡すものは準備済みとする）
$json = json_encode($data);
$b64 = base64_encode($json);
$js = "var data=JSON.parse(window.atob('".$b64."'));";
header('Content-Type: text/javascript; charset=UTF-8');
echo $js;
HTML（JavaScript）側のコード
<script type="text/javascript" src="config.js.php"></script>
0 件のコメント