PHP に変数があり、その値を JavaScript コードで必要としています。PHP から JavaScript に変数を取得するにはどうすればよいですか?
次のようなコードがあります:
<?php
$val = $myService->getValue(); // Makes an API and database call
同じページに、変数の値を$val
パラメータとして渡す必要がある JavaScript コードがあります。
<script>
myPlugin.start($val); // I tried this, but it didn't work
<?php myPlugin.start($val); ?> // This didn't work either
myPlugin.start(<?=$val?>); // This works sometimes, but sometimes it fails
</script>
ベストアンサー1
実際には、これを行うにはいくつかの方法があります。あるものは他の方法よりも多くのオーバーヘッドを必要とし、あるものは他の方法よりも優れていると考えられています。
順不同:
- AJAX を使用して、サーバーから必要なデータを取得します。
- データをページのどこかにエコーし、JavaScript を使用して DOM から情報を取得します。
- データを JavaScript に直接エコーします。
この記事では、上記の各方法を検討し、それぞれの長所と短所、および実装方法を見ていきます。
1. AJAXを使用してサーバーから必要なデータを取得する
サーバー側スクリプトとクライアント側スクリプトが完全に分離されているため、この方法が最適であると考えられています。
長所
- レイヤー間の分離の改善- 明日 PHP の使用をやめて、サーブレット、REST API、またはその他のサービスに移行する場合でも、JavaScript コードをあまり変更する必要はありません。
- より読みやすく- JavaScript は JavaScript、PHP は PHP です。2 つを混在させなければ、どちらの言語でもより読みやすいコードが得られます。
- 非同期データ転送が可能- PHP から情報を取得するには、時間とリソースが大量にかかる場合があります。情報を待ったり、ページをロードしたり、いつでも情報を入手したりしたくない場合があります。
- データはマークアップ上に直接存在しません。つまり、マークアップには追加データが含まれず、JavaScript のみがそれを認識します。
短所
- 遅延- AJAX は HTTP リクエストを作成し、HTTP リクエストはネットワーク経由で伝送されるため、ネットワーク遅延が発生します。
- 状態- 別の HTTP リクエストで取得されたデータには、HTML ドキュメントを取得した HTTP リクエストからの情報は含まれません。この情報が必要になる場合があります (たとえば、フォームの送信に応じて HTML ドキュメントが生成される場合)。必要な場合は、何らかの方法で転送する必要があります。ページにデータを埋め込むことを除外した場合 (この手法を使用している場合は除外しています)、競合状態が発生する可能性のある Cookie/セッションに制限されます。
実装例
AJAX では、PHP が出力を生成するページと、JavaScript がその出力を取得するページの 2 つのページが必要です。
データを取得する.php
/* Do some operation here, like talk to the database, the file-session
* The world beyond, limbo, the city of shimmers, and Canada.
*
* AJAX generally uses strings, but you can output JSON, HTML and XML as well.
* It all depends on the Content-type header that you send with your AJAX
* request. */
echo json_encode(42); // In the end, you need to `echo` the result.
// All data should be `json_encode`-d.
// You can `json_encode` any value in PHP, arrays, strings,
// even objects.
index.php (または実際のページの名前)
<!-- snip -->
<script>
fetch("get-data.php")
.then((response) => {
if(!response.ok){ // Before parsing (i.e. decoding) the JSON data,
// check for any errors.
// In case of an error, throw.
throw new Error("Something went wrong!");
}
return response.json(); // Parse the JSON data.
})
.then((data) => {
// This is where you handle what to do with the response.
alert(data); // Will alert: 42
})
.catch((error) => {
// This is where you handle errors.
});
</script>
<!-- snip -->
上記の 2 つのファイルの組み合わせにより、42
ファイルの読み込みが完了すると警告が表示されます。
その他の読み物
2. データをページのどこかにエコーし、JavaScriptを使用してDOMから情報を取得します。
この方法は AJAX ほど好ましくありませんが、それでも利点はあります。JavaScriptに PHP が直接含まれていないという意味で、PHP と JavaScript は比較的分離されています。
長所
- 高速- DOM 操作は多くの場合高速であり、大量のデータを比較的高速に保存してアクセスできます。
短所
- 潜在的に意味のないマークアップ
<input type=hidden>
- 通常は、から情報を取得する方が簡単なので、何らかの を使って情報を格納しますinputNode.value
が、そうすると HTML に意味のない要素が含まれることになります。HTML には<meta>
ドキュメントに関するデータ用の 要素があり、HTML 5 では、data-*
特定の要素に関連付けることができる、JavaScript で読み取るためのデータ専用の属性が導入されています。 - ソースが汚くなる- PHP が生成するデータは HTML ソースに直接出力されるため、HTML ソースが大きくなり、焦点が絞られなくなります。
- 構造化データを取得するのが難しくなります- 構造化データは有効な HTML である必要があります。そうでない場合は、文字列を自分でエスケープして変換する必要があります。
- PHP をデータ ロジックに密接に結合します。PHP はプレゼンテーションで使用されるため、2 つを明確に分離することはできません。
実装例
これにより、ユーザーには表示されないが、JavaScript に表示される何らかの要素を作成するというアイデアが生まれます。
インデックス
<!-- snip -->
<div id="dom-target" style="display: none;">
<?php
$output = "42"; // Again, do some operation, get the output.
echo htmlspecialchars($output); /* You have to escape because the result
will not be valid HTML otherwise. */
?>
</div>
<script>
var div = document.getElementById("dom-target");
var myData = div.textContent;
</script>
<!-- snip -->
3. データを直接JavaScriptにエコーする
おそらくこれが一番理解しやすいでしょう。
長所
- 非常に簡単に実装できます- これを実装して理解するのにほとんど時間がかかりません。
- ソースを汚しません- 変数は JavaScript に直接出力されるため、DOM は影響を受けません。
短所
- PHP をデータ ロジックに密接に結合します。PHP はプレゼンテーションで使用されるため、2 つを明確に分離することはできません。
実装例
実装は比較的簡単です。
<!-- snip -->
<script>
var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->
幸運を!