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 に直接エコーします。

この記事では、上記の各方法を検討し、それぞれの方法の長所と短所、およびそれらの実装方法を理解します。

＃＃＃１。 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 がその出力を取得するページです。

data.phpの取得

リーリー

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

リーリー

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

42

が鳴ります。

その他の読み物

フェッチ API の使用

• an-ajax 呼び出しから非同期呼び出しに応答を返すにはどうすればよいですか? < /strong>
• ＃＃＃２。ページ上のどこかでデータをエコーし​​、JavaScript を使用して DOM から情報を取得します。 この方法は AJAX ほど優れたものではありませんが、それでも利点があります。 JavaScript には直接の PHP が存在しないという意味で、PHP と JavaScript の間には 相対的な分離がまだ存在します。
＃＃＃アドバンテージ＃＃＃
高速
• - DOM 操作は一般に高速で、大量のデータを比較的迅速に保存したりアクセスしたりできます。
欠点
潜在的に非セマンティック マークアップ
• - inputNode を超えた情報を取得する方が簡単であるため、通常は、ある種の を使用して情報を保存します。 value ですが、これを行うと、HTML 内に意味のない要素が存在することになります。 HTML には、ドキュメントに関するデータを表す 要素があり、HTML 5 では、特に JavaScript で使用するために、特定の要素の読み取りデータに関連付けることができる data-* 属性が導入されました。 。
ソース コードをいじる
• - PHP で生成されたデータは HTML ソース コードに直接出力されます。つまり、より大きくて焦点が絞られていない HTML ソース コードが得られることになります。
構造化データの取得は困難です
• - 構造化データは有効な HTML である必要があります。それ以外の場合は、文字列を自分でエスケープして変換する必要があります。
PHP とデータ ロジックを緊密に結合する
• - PHP はプレゼンテーションに使用されるため、この 2 つを完全に分離することはできません。
実装例

これにより、ユーザーには表示されないが JavaScript には表示される、ある種の要素を作成することが考えられます。

index.php

リーリー ＃＃＃３。データを JavaScript に直接エコーする
これがおそらく最も理解しやすいでしょう。

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

実装が非常に簡単

- 実装と理解にほとんど時間がかかりません。

• ソースを汚染しないでください - 変数は JavaScript に直接出力されるため、DOM には影響しません。
• 欠点
PHP とデータ ロジックを緊密に結合する

- PHP はプレゼンテーションに使用されるため、この 2 つを完全に分離することはできません。

• 実装例 実装は比較的単純です:
リーリー ＃＃＃幸運を！