PHP から JavaScript に変数を渡す
- AJAX を使用して PHP 変数を JavaScript に渡す
- JavaScript を使用して PHP スクリプトをエスケープし、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()
関数を呼び出します。関数のパラメーターとして、get
、get-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 変数 $var
を jsvar
に割り当てます。$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 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