PHPからJavaScriptへ変数を渡す方法、JavaScriptからPHPへ変数を渡す方法

サーバーサイドのPHP、JavaScriptのコードを書いていると、しばしば、PHPとJavaScriptの間で変数を相互に渡したいことがあります。

そこで、PHP、JavaScriptで相互に変数を渡す方法をまとめてみました。

PHPからJavaScriptに変数を渡す方法
JavaScriptからPHPに変数を渡す方法
JavaScriptの関連記事
JavaScript プログラミングの無料レッスン体験

PHPからJavaScriptに変数を渡す方法

あらかじめ、PHP側でfooとbarの変数を入れておきます。

JavaScript側では以下のようにして値を取り出します。

<script type="text/javascript">
    var foo = '<?php echo $foo; ?>';
    var bar = '<?php echo $bar; ?>';
</script>

var foo = '<?php echo $foo; ?>';

var bar = '<?php echo $bar; ?>';

</script>

JavaScriptからPHPに変数を渡す方法

Javascriptはブラウザで、PHPはサーバで実行されますので、

同じHTML内で、 Javascriptの実行結果をPHPに渡して使うことはできません。

ただし、非同期通信で、ajaxを使えば、JavaScriptからPHPに変数を渡すことが可能になります。

WordPressで、Ajaxを使った例は以下の通りです。

これが、JavaScriptのコードです。

$( '#submit' ).on( 'click', function(){
     
    var mes = 'Hello World!!';
         
    $.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {
            'action' : 'view_mes',
            'mes' : mes,
        },
        success: function( response ){
            alert( response );
        }
    });
    return false;
});

$( '#submit' ).on( 'click', function(){

var mes = 'Hello World!!';

$.ajax({

type: 'POST',

url: ajaxurl,

data: {

'action' : 'view_mes',

'mes' : mes,

success: function( response ){

alert( response );

}

});

return false;

});

こっちが、functions.php に追加したPHPのコードです。

function view_mes(){
    $mes = $_POST['mes'];
    echo $mes;
    die();
}
add_action( 'wp_ajax_view_mes', 'view_mes' );
add_action( 'wp_ajax_nopriv_view_mes', 'view_mes' );

function view_mes(){

$mes = $_POST['mes'];

echo $mes;

die();

}

add_action( 'wp_ajax_view_mes', 'view_mes' );

add_action( 'wp_ajax_nopriv_view_mes', 'view_mes' );

これで、JavaScript側で定義した

「Hello World!!」がPHP側に渡って表示されます。

JavaScriptの関連記事

JavaScriptの関連記事をまとめてみました。

↓JavaScriptでドラッグ＆ドロップしてサーバーへ送信

・https://urashita.com/archives/27739

↓ツリー表示をするためのJavaScriptのライブラリ

・https://urashita.com/archives/28336

JavaScript プログラミングの無料レッスン体験

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

＜Codecampの特徴＞

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp