PHPとjavascriptの連携、PHPの変数を別ファイルのjavascriptで受け取る方法
同一ページ上でPHP、HTML、javascriptを記述
1~4行目 : PHPの記述
6~21行目 : HTMLの記述
14~18行目 : javascriptの記述
以下のように、index.htmlのファイルに3言語(PHP,HTML,javascript)を書くことができます。
<?php
// PHPの変数を宣言
$name = "Takuro";
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>PHP javascript</title>
</head>
<body>
<script>
// PHPの変数を受け取る
const name = "<?php echo $name?>";
console.log(name);
</script>
</body>
</html>PHPファイル、javascriptファイルを分けて記述
それぞれを別ファイルに記述する時は注意が必要です。
PHPファイル (function.php)
<?php
$name = "takuro";
?>HTMLファイル (index.html)
1~3行目 : PHPファイルの呼び出し
5~20行目 : HTMLの記述
14~16行目 : javascriptの記述。これを忘れるとエラーが出ます。
17行目 : 別のjavascriptファイルを呼び出す
<?php
require('./function.php');
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- ここを忘れないように -->
<script>
const name = "<?php echo $name?>";
</script>
<script src="./script.js"></script>
</body>
</html>javascriptファイル (script.js)
コンソールで確認すると変数の値が取得できているはずです。
console.log(name);まとめ
-
同一ページ内
- HTMLの前にPHPを記述
- </body>タグ前にjavascriptを記述し、受け取る
-
ファイルをそれぞれ分ける
- requireでPHPファイルを呼び出す
- </body>タグ前にjavascriptを記述し、受け取る
- その下に別のjavascriptファイルを読み込み、 PHPの変数を受け取る
