PHP から JavaScript に変数とデータを渡すにはどうすればよいですか?
P粉369196603
2023-08-27 12:05:35
<p>PHP に変数があり、JavaScript コードでその値が必要です。変数を PHP から JavaScript に変換するにはどうすればよいですか? </p>
<p>私のコードは次のようになります:</p>
<pre class="brush:php;toolbar:false;"><?php
$val = $myService->getValue(); // API とデータベース呼び出しを行います
</pre>
<p>同じページに、<code>$val</code> 変数の値をパラメータとして渡す必要がある JavaScript コードがあります。
<pre class="brush:js;toolbar:false;"><script>
myPlugin.start($val); // 試してみましたが、うまくいきませんでした
<?php myPlugin.start($val); ?> // これもうまくいきませんでした
myPlugin.start(<?=$val?>); // これはうまくいくこともありますが、失敗することもあります
</スクリプト>
</pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
私は通常、HTML で data-* 属性を使用します。
リーリーこの例では jQuery を使用していますが、他のライブラリやプレーンな JavaScript にも適用できます。
データセットのプロパティの詳細については、こちらをご覧ください: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset
これを行うには実際にはいくつかの方法があります。他のものよりも多くのオーバーヘッドを必要とするものや、他のものよりも優れていると考えられるものもあります。
名前は順番にリストされていません:
この記事では、上記の各方法を検討し、それぞれの方法の長所と短所、およびそれらの実装方法を理解します。
＃＃＃１。 AJAX を使用してサーバーから必要なデータを取得します
サーバー側のスクリプトとクライアント側のスクリプトは完全に別個であるため、この方法が最適であると考えられています。 ＃＃＃アドバンテージ＃＃＃
レイヤー間の分離の改善
- 明日、PHP の使用をやめて、サーブレット、REST API、またはその他のサービスに移行したい場合、JavaScript コードをあまり変更する必要はありません。遅延
- AJAX は HTTP リクエストを作成し、HTTP リクエストはネットワーク遅延を伴いながらネットワーク上を移動します。-
ステータス - 別の HTTP リクエスト経由で取得されたデータには、HTML ドキュメントを取得した HTTP リクエストの情報は含まれません。この情報が必要になる場合があります (たとえば、フォームの送信に応じて HTML ドキュメントが生成される場合)。その場合は、何らかの方法で送信する必要があります。ページ内の埋め込みデータ (このテクノロジーを使用する場合はデータを所有します) を除外した場合、競合条件の対象となる可能性のある Cookie/セッションの使用が制限されます。
-
実装例
AJAX では、2 つのページが必要です。1 つは PHP が出力を生成するページで、もう 1 つは JavaScript がその出力を取得するページです。
data.phpの取得リーリー
index.php (または実際のページの名前)リーリー
上記 2 つのファイルを組み合わせると、ファイルの読み込みが完了するとアラート42
が鳴ります。
その他の読み物フェッチ API の使用
高速- - DOM 操作は一般に高速で、大量のデータを比較的迅速に保存したりアクセスしたりできます。
欠点
潜在的に非セマンティック マークアップ- - inputNode を超えた情報を取得する方が簡単であるため、通常は、ある種の
ソース コードをいじる - - PHP で生成されたデータは HTML ソース コードに直接出力されます。つまり、より大きくて焦点が絞られていない HTML ソース コードが得られることになります。
構造化データの取得は困難です- - 構造化データは有効な HTML である必要があります。それ以外の場合は、文字列を自分でエスケープして変換する必要があります。
PHP とデータ ロジックを緊密に結合する- - PHP はプレゼンテーションに使用されるため、この 2 つを完全に分離することはできません。
実装例
を使用して情報を保存します。 valueですが、これを行うと、HTML 内に意味のない要素が存在することになります。 HTML には、ドキュメントに関するデータを表す要素があり、HTML 5 では、特に JavaScript で使用するために、特定の要素の読み取りデータに関連付けることができる data-*属性が導入されました。 。これにより、ユーザーには表示されないが JavaScript には表示される、ある種の要素を作成することが考えられます。
index.php
リーリー ＃＃＃３。データを JavaScript に直接エコーする
これがおそらく最も理解しやすいでしょう。＃＃＃アドバンテージ＃＃＃
実装が非常に簡単- 実装と理解にほとんど時間がかかりません。
- ソースを汚染しないでください - 変数は JavaScript に直接出力されるため、DOM には影響しません。
- 欠点
PHP とデータ ロジックを緊密に結合する- PHP はプレゼンテーションに使用されるため、この 2 つを完全に分離することはできません。