▲TOPへ戻る

PHPとjavascriptの連携、PHPの変数を別ファイルのjavascriptで受け取る方法

variable

同一ページ上で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);

まとめ

  1. 同一ページ内
    1. HTMLの前にPHPを記述
    2. </body>タグ前にjavascriptを記述し、受け取る
  2. ファイルをそれぞれ分ける
    1. requireでPHPファイルを呼び出す
    2. </body>タグ前にjavascriptを記述し、受け取る
    3. その下に別のjavascriptファイルを読み込み、 PHPの変数を受け取る

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ