PHP から JavaScript に変数を渡す

Subodh Poudel 2023年1月30日
PHP
  1. AJAX を使用して PHP 変数を JavaScript に渡す
  2. JavaScript を使用して PHP スクリプトをエスケープし、PHP 変数を JavaScript に渡する
  3. 短い PHP エコータグ <?=?> を JavaScript 内で使用して、PHP 変数を JavaScript に渡する
PHP から JavaScript に変数を渡す

AJAX を使用して PHP 変数を JavaScript に渡す方法を紹介します。このメソッドは、PHP サーバーからデータを要求し、クライアントマシンで実行されます。

また、PHP を JavaScript にエスケープすることにより、JavaScript で PHP 変数を渡す別の方法を示します。PHP をエスケープするために、PHP スクリプトの後に JavaScript を記述します。

JavaScript で短い echo タグを使用して PHP 変数を JavaScript に渡す別の例を <?=$var?> として示します。ここで、<?=$var?> は PHP 変数です。

AJAX を使用して PHP 変数を JavaScript に渡す

AJAX を使用して、PHP サーバーから JavaScript にデータと変数を取得できます。このメソッドには、サーバー側とクライアント側の別々のスクリプトがあります。コードがよりクリーンになり、コードの可読性が向上します。AJAX は AsynchronousJavaScript andXML の略です。XMLHttpRequest オブジェクトを使用して、サーバーにデータを要求します。JavaScript と HTMLDOM を使用してデータを表示します。このプロセスは非同期で発生します。つまり、ページが再ロードされることなく Web ページで変更が発生します。ただし、AJAX が HTTP リクエストを送信するため、ネットワーク上で使用される場合は遅延が発生します。このメソッドでは、JavaScript コードを PHP ファイルに記述します。

たとえば、index.php という名前の PHP ファイルを作成します。<script> タグ内に JavaScript コードを記述します。var キーワードを使用して、可変の req を作成します。XMLHttpRequest() 関数のリクエストオブジェクトを作成し、それを req 変数に割り当てます。関数式を使用して、req オブジェクトで onload() 関数を呼び出します。関数内で、console.log() 関数を使用して this.responseText プロパティをログに記録します。関数式はセミコロンで終了することを忘れないでください。req オブジェクトを使用して、open() 関数を呼び出します。関数のパラメーターとして、getget-data.php、および true を同時に指定します。req オブジェクトを使用して send() 関数を呼び出します。get-data.php という名前の別の PHP ファイルを作成します。Mountain の値を var 変数に割り当てます。var をパラメーターとして json_encode() 関数をエコーし​​ます。

以下の例では、XMLHttpRequest() 関数を使用してリクエストオブジェクトを作成しました。onload() 関数は、応答中に実行される操作を処理します。open() 関数は、HTTP メソッド、JSON 応答を送信する PHP ファイル、およびスクリプトの残りの実行を制御するブール値を指定します。get-data.php ファイルの json_encode() 関数は、JSON 形式で応答を送信します。ここでは、コンソールに変数 $var を出力しました。

サンプルコード:

# php 7.*
<?php
?>
<script>
var req = new XMLHttpRequest(); 
    req.onload = function() {
    console.log(this.responseText); 
 };
req.open("get", "get-data.php", true); 
req.send();
</script>
# php 7.*
<?php
$var = "Mountain";
echo json_encode($var); 
?>

出力:

"Mountain"

JavaScript を使用して PHP スクリプトをエスケープし、PHP 変数を JavaScript に渡する

PHP タグの後に JavaScript を使用して、PHP スクリプトをエスケープできます。PHP スクリプトで PHP 変数を作成できます。次に、JavaScript を記述して、上記の PHP をエスケープし、JavaScript コード内で変数を渡すことができます。JavaScript 内で、PHP タグを使用して PHP 変数をエコーし​​、JavaScript 変数に割り当てることができます。

たとえば、PHP タグ内の変数 $var に値 Metallica を割り当てます。script タグを記述し、その中に PHP タグを記述します。PHP タグ内で、JavaScript 変数 jsvar をエコーし​​ます。PHP 変数 $varjsvar に割り当てます。$var を囲む引用符とその後のセミコロンを忘れないでください。PHP タグを閉じ、console.log() 関数を使用して jsvar の値をログに記録します。script タグを閉じます。以下の例では、JavaScript を使用してコンソールに PHP 変数 $var を記録しています。Web ページのコンソールで出力を確認できます。

サンプルコード:

#php 7.x
<?php
$var = 'Metallica';
?>
<script>
   <?php
       echo "var jsvar ='$var';";
   ?>
   console.log(jsvar); 
</script>

出力:

Metallica

短い PHP エコータグ <?=?> を JavaScript 内で使用して、PHP 変数を JavaScript に渡する

JavaScript 内で短い PHP エコータグを使用して、PHP 変数を JavaScript に渡すことができます。短い PHP エコータグを使用して、PHP タグと echo ステートメントを作成する手間を省くことができます。簡単な方法です。この方法は、概念と実行の点で 2 番目の方法と非常によく似ています。

たとえば、PHP タグ内の変数 $var に値 Megadeth を割り当てます。script タグを開き、JavaScript 変数 jsvar を作成します。jsvar 変数の値として、短縮形のエコータグ $var を記述します。console.log() 関数を使用して変数をログに記録します。スクリプトの出力は、Web ページのコンソールで確認できます。

コード例:

#php 7.x
<?php
$var = 'Megadeth';
?>
<script>
    var jsvar = '<?=$var?>';
    console.log(jsvar); 
</script>
?>

出力:

Megadeth
著者: Subodh Poudel
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn