PHPの変数とデータをJavaScriptに渡す方法

Question

PHP に変数があり、その値を JavaScript コードで使用する必要があります。 PHP から JavaScript に変数を渡すにはどうすればよいですか?

次のコードがあります:

<?php
$val = $myService->getValue(); // API とデータベースの呼び出しを行う

同じページに、$val 変数の値をパラメータとして渡す必要がある JavaScript コードがあります。

<script>
    myPlugin.start($val); // 試してみましたが、うまくいきませんでした
    <?php myPlugin.start($val); ?> // これも失敗しました
    myPlugin.start(<?=$val?>); // これはうまくいくこともありますが、失敗することもあります
</スクリプト>

Answer 1

私は通常、HTML で data-* 属性を使用します。

リーリー

この例では jQuery を使用していますが、他のライブラリやネイティブ JavaScript にも適用できます。

データセット属性の詳細については、こちらでご覧いただけます: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

Answer 2

これを行うには実際にはいくつかの方法があります。一部のメソッドはより多くのオーバーヘッドを必要とし、一部のメソッドは他のメソッドよりも優れていると考えられます。

順不同:

1. AJAX を使用して、サーバーから必要なデータを取得します。
2. データをページ上の場所にエコーし、JavaScript を使用して DOM から情報を取得します。
3. データを JavaScript に直接エコーします。

この記事では、上記の各方法の長所と短所、およびそれらの実装方法について詳しく説明します。

1. AJAX を使用してサーバーから必要なデータを取得します

サーバー側スクリプトとクライアント側スクリプトが完全に分離されているため、 このアプローチが最良であると考えられています。 ＃＃＃アドバンテージ＃＃＃

レイヤー間の分離の改善

- 明日から PHP の使用をやめて、サーブレット、REST API、またはその他のサービスに移行したい場合は、JavaScript コードをほとんど変更する必要はありません。
• 読みやすくなりました
- JavaScript は JavaScript であり、PHP は PHP です。この 2 つを混合しないことで、より読みやすいコードが得られます。
• 非同期データ転送を許可する
- PHP から情報を取得するには、時間とリソースがかかる場合があります。場合によっては、情報を待つのではなく、ページをロードして、情報が到着したらそれを取得することもできます。
• データはマークアップに直接表示されません
- これは、マークアップが余分なデータなしでクリーンなままであり、JavaScript にのみ表示されることを意味します。
• 欠点

遅延

- AJAX は HTTP リクエストを作成しますが、HTTP リクエストはネットワーク上を移動するため、ネットワーク遅延が発生します。
• ステータス
- 別の HTTP リクエストを通じて取得されたデータには、HTML ドキュメントを取得するための HTTP リクエストから取得された情報は含まれません。この情報が必要になる場合があります (たとえば、HTML ドキュメントがフォームの送信に応じて生成された場合)。その場合は、何らかの方法で送信する必要があります。ページへのデータの埋め込みを除外している場合 (この手法を使用する場合は除外します)、使用できるのは Cookie/セッションのみであり、競合状態が発生する可能性があります。
• 実装例

AJAX を使用するには、2 つのページが必要です。1 つは PHP が出力を生成するページで、もう 1 つは JavaScript が出力を取得するページです。

get-data.php

リーリー

index.php (または実際のページの名前)

リーリー

ファイルの読み込みが完了すると、上記 2 つのファイルを組み合わせたものが

42

表示されます。

その他の読み物

フェッチ API の使用

• 非同期呼び出しから応答を返すにはどうすればよいですか?
• 2. データをページ上の特定の場所にエコーし、JavaScript を使用して DOM から情報を取得します。 この方法は AJAX よりも望ましい方法ではありませんが、それでも利点はあります。 PHP は JavaScript で直接使用されないため、ある意味では、PHP と JavaScript は依然として
相対的に

分離されています。

＃＃＃アドバンテージ＃＃＃

高速
• - DOM 操作は一般に高速で、大量のデータを比較的迅速に保存したりアクセスしたりできます。
欠点

潜在的に非セマンティック マークアップ
• - 通常、inputNode.value から情報を保存するには、何らかの <input type=hidden> を使用します。情報を取り込むのは簡単ですが、そうすると HTML に無意味な要素が含まれることになります。 HTML にはドキュメント データ用の <meta> 要素があり、HTML 5 では、特定の要素の JavaScript 関連データ用に data-* 属性が導入されています。
ソース コードを乱雑にする
• - PHP で生成されたデータは HTML ソース コードに直接出力されます。これは、より大きくて焦点が絞られていない HTML ソース コードが得られることを意味します。
構造化データの取得が難しい
• - 構造化データは有効な HTML である必要があります。そうでない場合は、文字列を自分でエスケープして変換する必要があります。
PHP とデータ ロジックを緊密に結合する
• - PHP はプレゼンテーションに使用されるため、この 2 つを明確に分離する方法はありません。
実装例

この場合、ユーザーには見えないが JavaScript には見える、ある種の要素を作成する必要があります。

index.php

リーリー

3. データを JavaScript に直接エコーする

これがおそらく最も理解しやすい方法です。

＃＃＃アドバンテージ＃＃＃

実装が非常に簡単

- これを実現するためのコストは非常に低く、理解しやすいです。

• ソース コードを汚染しません - 変数は JavaScript に直接出力されるため、