phpの変数の中身をjavascript(jQuery)で処理する方法

外部jsファイルの中ではphpが使えないため、phpで得られた結果をjavascript(jquery)で処理することができません。 この記事ではphpで受け取った値をjavascript(jquery)で使用する方法を3つ紹介します。

phpファイルにjavascriptの処理を直書き

javascriptの処理をphpファイルに直書きすることで、phpの結果をjavascriptで処理できます。

<?php $str = "phpの変数です。"; ?>
<script>
console.log("<?php echo $str; ?>");
</script>

【コンソール出力結果】 phpの変数です。

ただし、このやり方では外部jsの処理に値を渡すことはできません。

グローバル変数にphpの値を渡す【外部js可】

phpファイル内でjavascriptのグローバル変数を作り、それに値を渡します。 こうすることで外部jsからでも呼び出すことができます。

<?php $gStr = "グローバル変数に渡して外部jsで処理"; ?>
<script>
var gStr = "<?php echo $gStr ?>";
</script>

console.log(gStr);

【コンソール出力結果】 グローバル変数に渡して外部jsで処理

ただしこのやり方では無名関数の中やjQuery関数の中で値を使うことが出来ません。

オブジェクト変数にphpの値を渡す【外部js可】

phpファイル内でjavascriptオブジェクトを生成し、そのオブジェクト変数に値を渡します。 こうすることで外部jsからでも呼び出すことができます。

<?php $str = "オブジェクト変数に渡して外部jsの無名関数で処理"; ?>
<?php $jStr = "オブジェクト変数に渡して外部jsのjQuery関数で処理"; ?>
<script>
var php = {
str: "<?php echo $str; ?>",
jStr:"<?php echo $jStr; ?>",
};
</script>

(function(){
console.log(php.str);
})();
$(function(){
console.log(php.jStr)
});

【コンソール出力結果】 オブジェクト変数に渡して外部jsの無名関数で処理 オブジェクト変数に渡して外部jsのjQuery関数で処理

こうすることで無名関数やjquey関数の中でもphpが返した結果を使うことができます。

個人的にはオブジェクト変数で渡す方法が使いやすそうです。

広告