完成済みのphpファイルで、phpから、新規に実装するjavascriptにデータを渡す。

Question

問題をシンプルにするため、
すべて一つのphpファイル内の出来事としています。

php で書かれたページにjsを追加実装する場合で、
php側のデータをjsに渡す方法について。

状況
すでに完成しているページへの実装です。
対象となっているファイルはphpファイルで、
ファイルの上部で、dbへのクエリ結果を格納するphp変数があります。

その後、htmlとなり、上部のphp部分の変数を使ってコーディングしています。

このファイルに、d3.jsをつかって、グラフを描くことになりました。
その際、すでに存在している、php部分にあるphp変数を活用します。

このphp変数をjsに渡す際、
自分は、json形式に変換して、
html部分にいったん埋め込みました。
↓こんな感じです。
input id="target" type="hidden" value="<?php echo json(ここに渡したい変数);?>"

そして
js ファイルからid="target"をもつ、inputを取得し、json化したデータを取得しました。

制限としては、
・jsは、素のjsとd3.jsのみ利用し、jqueryは使えません。
・jsonの内容に機密情報はありません。
・jsファイルは別ファイルに記述し、即時関数で囲む必要があります。

行いたいことはできるのですが、
このinput type="hidden" を使うのが、なんとなく、気持ち悪く、ほかにスマートな方法をご存じの方がおられればと思い、質問させていただきました。

どうぞ、よろしくお願いいたします。

Answer 1

1ファイルのphpで完結しているのでしょうか？
jsからphpにデータを渡すにはapiが必要です。
自分自身のphpをapiとして利用するのであれば適当なパラメータを渡して
apiとして挙動するような仕組みにすればいいでしょう。
jsからphpへの受け渡しは

• ajax(xhr)
• fetch
• jsonp

などで処理できます

Comments

[tt02]

ご回答、ありがとございました。
ご回答いただいた点も、機会があるときによく勉強いたします。

Answer 2

PHP から JavaScript にデータを渡すというのは、サーバ側の処理したデータをクライアントが読める場所に書くのと同義です。
ですから HTML に埋め込むか、cookie を介して渡すなどの手段しかないでしょう。

逆に JavaScript からサーバに問い合わせてデータをもらう（ajax）には、サーバ側に受け口となる ajax リクエストに対する処理を追加してやる必要があります。

余談：json を文字列化して埋め込む場合、そのままだと HTML を崩してしまう（文字列中に " があったらアウト）可能性があるので、BASE64 エンコードするなどした方がよいです。

Comments

[tt02]

理論的なご説明でとても理解しやすかったです。
ありがとうございます。
エンコードのことも参考になりました。
よく勉強したいとおもいます。