PHPからJavascriptへのデータの渡し方

Question

質問内容

現在ブラウザのページにグラフを表示しようとJavascriptを使って色々試行錯誤しているのですがその際データを渡す良い方法がわかりません。
一応html上に

<script type="text/javascript">
var data0 = ...
var data1 = ...
</script>

みたいなものを挿入すれば受け渡せるのですがそれだとソースコードに直接書いてしまうためあまり良いとは思えません。
ajaxという非同期通信？を使用するとできると聞いたので試しにphpファイル上で`echo 'sample``と最後に書いてから
jsファイル上で

$.ajax( {
	type: 'GET',
	dataType: 'json',  
	url: 'ファイル名'
} ).done( function( data ) {
	alert(data);
	console.log(data);
} );

と書いてみたのですがコンソール上などに何も表示されなかったのでデータが渡せなかったのだと思います。
ajaxのような非同期通信を使うかまたは別の渡せる方法があれば知りたいのでよろしくお願いします。

##追記

ネットや過去質問で検索してみてはどうかということについて

検索はしてみたのですがjavascriptからphpのは多いのですがphpからというのがあまり見つかりませんでした。
見つかったのですとこのサイトやこのサイトのようにvar foo = <?php echo $foo; ?>;と書くものでした。
ただこのやり方ですと

SyntaxError: expected expression, got '<'

とブラウザで言われてしまいデータが受け取れませんでした。
シングルクォーテーションで囲むものもあったのですがそれだとただの文字列となってしまいました。
このサイトのやり方ですとJSONに変換しているのですが中に書くやり方なので同じ方法と判断しました。
このやり方はこの質問を参考にしてやってみました。

直接書くことについて

直接書く書き方だとそのためだけに<script type="text/javascript"></script>が追加されてしまい、無理やり解決するように感じてしまったためそのように書いてしまいましたすみません。実際javascriptで扱うデータなのでデータは見られてしまいますし、問題自体はないのかなとは思います。

Comments

[退会済みユーザー]

ネット検索すれば、いろんな事例が見つかる話だと思うけど、自分で調べようとしたのでしょうか？ ナニを参考にコードを書いていますか？

[m.ts10806]

過去質問に同類のものが結構あがっています。まずは過去質問を確認してみてはいかがでしょうか？

[tabuu]

>みたいなものを挿入すれば受け渡せるのですがそれだとソースコードに直接書いてしまうためあまり良いとは思えません。
何か問題ありますか？

Answer 1

やり方には作法みたいなものがあるので、
まずはサンプル通りに試してみてください。

【PHP】Ajaxを使ってJSON形式で配列データを取得し、Webページ上に表示させる最低限の方法 - Qiita

Comments

[cometbeet]

わかりましたここを見てまず基本を覚えてみようと思います。

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $.ajax({
  type: 'GET',
  //dataType: 'json',  
  dataType: 'text',  
  url: 'sample.php'
  }).done( function( data ) {
    alert(data);
    console.log(data);
  });
});
</script>

とりあえずdataTypeをtextにして受けてみてください
おそらく型があっていないだけだと思います

jsonで受けるなら配列やオブジェクトに変換できるjson形式にしてください

<?PHP
echo '["sample"]';

Comments

[cometbeet]

json形式で整えたら表記できました。
後$(function(){});もいるのですね。

[yambejp]

ajaxだけでいえば$(function(){});はなくても動きますよ

Answer 3

ajaxやろうとしてできなかったのは別回答の通りとして、
質問後半について言及してみます。

実際javascriptで扱うデータなのでデータは見られてしまいますし、問題自体はないのかなとは思います。

認識どおり問題ないと思います。
ajaxにしてもajaxで取得するためのコードを書かなければならないわけですし、それを非同期で呼び出すか、PHPプログラムで直接取得した情報をechoするかのどちらかで、ほぼ同じです。

非同期で呼び出す場合のPHP

<?php
$data = [10,20,50,100];
echo json_encode($data);

PHPプログラムで直接取得した情報をechoする

<?php
$data = [10,20,50,100];
?>
<script>
 var data = <?php echo json_encode($data);?>;
</script>

いずれにしてもPHPコードは参照されないわけですし。
ajaxにすることによってajaxで指定されたURLが直接実行されたときの対策も実は必要だったりして、それはそれでそれなりの面倒があります。

Comments

[cometbeet]

なるほどajaxでやる場合にも対策が必要なのですね。
XSSやアクセス制限みたいなものと考えていいのでしょうか？

[m.ts10806]

XSSは画面出力時なので
「PHPプログラムで直接取得した情報をechoする 」には必要ですね。
「非同期で呼び出す場合」はデータ自体は表示に使われるかどうかphp側は知らないのでやるならJavaScript側です。
そもそものSyntaxErrorがHTMLファイルまたはJSファイルに直接php書こうとした結果出てるっぽいエラー内容なのでその辺りは理解を深めていく必要はありそうです。

[cometbeet]

そうですね、エラーの部分は参考サイトでこう書かれていたのでJSファイル内で直接PHPが呼び出せるものかと思ってやってしまいました。
なるほどJavascript側で対策するのですね。Javascriptはまだ触りたてわからない部分が多いのでそういうセキュリティ面も含めて勉強していこうかと思います。

[m.ts10806]

PHPはあくまで.php拡張子のファイルでのみ利用できると思って良いです(サーバー設定により.htmlでも可能ですが混乱を招くのでやめましょう）
「安全なウェブサイトの作り方」は参考になると思います。チェックリストもpdfなどで出回っているので全て導入するかはさておき脆弱性についても知ることが出来ると思います。