PHP⇒JavaScript

PHP⇒JavaScript の呼び出しと変数の参照です。
PHP はサーバーサイドで動くのに対して、JavaScript のプログラムは PHP が吐き出したコードがクライアントサイドのブラウザに渡されて動作します。
PHP の変数を JavaScript に渡すには JavaScript のコードを生成するときに PHP の変数を参照すれば良いのです。

JavaScript 変数=PHP 変数

  1. php_js.php のソースコードを utf-8(BOM 付き)でタイプしてサーバーにアップロードして下さい。
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
      <?php
        $v1 = 123;
        $v2 = 'abcXYZ';
      ?>
      <script type="text/javascript">
        var js_v1="<?php echo $v1;?>";
        var js_v2="<?php echo $v2;?>";
        window.alert("v1=" + js_v1 + "  v2=" + js_v2);
      </script>
    </body>
    </html>
    
  2. 次のリンクをクリックすると php_js.php を呼び出します。
    PHPの変数を参照
    php_js.php を呼び出すソースコードです。
    <a href="http://maedakobe.rw.xsi.jp/php/php_js.php">PHPの変数を参照</a>
    
  3. JavaScript の変数(var js_v1, var js_v2)に対して、PHP 変数(echo $v1, echo $v2)を割り当てます。
        var js_v1="<?php echo $v1;?>";
        var js_v2="<?php echo $v2;?>";
    
  4. このソースプログラムがクライアント側に送られてきたときのソースコードです。
    PHP の $v1, $v2 の値が JavaScript に送られて window.alert() で表示されます。
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
        <script type="text/javascript">
        var js_v1="123";
        var js_v2="abcXYZ";
        window.alert("v1=" + js_v1 + "  v2=" + js_v2);
      </script>
    </body>
    </html>
    

JavaScript 変数=PHP 変数-2

  1. js_php.php のソースコードを utf-8(BOM 付き)でタイプしてサーバーにアップロードして下さい。
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <?php
        $a="test";
        print("<script type=\"text/javascript\">");
        print("var a = '".$a."';\n");
        print("alert(a);\n");
        print("</script>\n");
    ?>
    </body>
    </html>
    
  2. 次のリンクをクリックすると js_php.php を呼び出します。
    PHPでJavaScriptを吐き出す
    js_php.php を呼び出すソースコードです。
    <a href="http://maedakobe.rw.xsi.jp/php/js_php.php">PHPでJavaScriptを吐き出す</a>
    
  3. PHP で $a を定義します。
    <?php
        $a="test";
    
  4. JavaScript のコードを吐き出します。
        print("<script type=\"text/javascript\">");
        print("var a = '".$a."';\n");
        print("alert(a);\n");
        print("</script>\n");
    

JavaScript 文字列=PHP の配列

  1. PHP の配列を文字列に変換して JavaScript に渡します。
    php_js_ar1.php のソースコードを utf-8(BOM 付き)でタイプしてサーバーにアップロードして下さい。
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <?php
        $arrBar = array(1,2,3);
        $arrBar = implode(',', $arrBar);
    ?>
    <script type="text/javascript">
        var jsBar = '<?php echo $arrBar; ?>';
        var arr = jsBar.split(',');
        document.write(arr);
    </script>
    </body>
    </html>
    
  2. 次のリンクをクリックすると php_js_ar1.php を呼び出します。
    配列の参照-1
    php_js_ar1.php の呼び出し方です。
    <a href="http://maedakobe.rw.xsi.jp/php/php_js_ar1.php">配列の参照-1</a>
    
  3. JavaScript のループの中に echo 文を置けたら簡単なのですが、JavaScript の命令が実行されるのはクライアント側に送られてからです。
    最も直観的なのは、配列を文字列に変換して渡す方法でしょうか?。
  4. PHP の配列 $arrBar を implode() 関数で ',' で区切って文字列に変換します。
    implode(',', $arrBar) は、配列を文字列に変換する PHP の関数です。
  5. 変換した文字列を echo で JavaScript に送ります。
  6. JavaScript 側では、受け取った文字列を split(',') 関数で配列に戻して document.write(arr) で印字します。

JavaScript 配列=PHP の配列

  1. PHP の配列を JavaScript で参照します。
    php_js_ar2.php のソースコードを utf-8(BOM 付き)でタイプしてサーバーにアップロードして下さい。
    <html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
    <?php
        $arr = array("maeda","suzuki","tanaka");
        $jsonTest = json_encode($arr);
    ?>
    <script type="text/javascript">
        var arr = JSON.parse('<?php echo $jsonTest;?>');
        document.write(arr);
    </script>
    </body>
    </html>
    
  2. 次のリンクをクリックすると php_js_ar2.php を呼び出します。
    配列の参照-2
    php_js_ar2.php を呼び出すソースコードです。
    <a href="http://maedakobe.rw.xsi.jp/php/php_js_ar2.php">配列の参照-2</a>
    
  3. 配列を文字列に変換しないで渡すには JSON を使います。
    PHP では json_encode($arr); でコード変換します。
  4. JavaScript では JSON.parse(''); で $jsonTest を受け取ります。
  5. document.write(arr) で印字します。

前田稔の超初心者のプログラム入門
PHP Program