JavaScript に PHP の値を引き渡す方法

JavaScript に PHP の値を引き渡す方法を3つご紹介したいと思います。

変更・改訂履歴

[ 2023.06.29 ] 改訂
data属性を利用した値の出力方法の変更

前提

SPIRAL ver.2 では、 JavaScript タブ内に記述した内容は、
HTML（body部分）と別ファイルとして出力され、読み込まれます。
PHP は、ページの PHP タブ内でのみ動作し、body や JavaScript タブ内に PHP を記載することはできません。
また、Thymeleaf のインライン処理を使用して、JavaScriptに値を渡すことができないので、
Thymeleaf,JavaScript を活用して PHP の値を受け取る必要があります。
下記の PHP の値を JavaScript に渡して alert 表示させたいと思います。

PHP

<?php
 $SPIRAL->setTHValue("message","成功");

方法① 関数の引数としてセット

ページのJavaScriptで設定した関数の引数として渡す方法となります。
参考：サポートサイト
「JavaScriptに値を渡す方法」の部分となります。

【POINT】
画面動作に合わせてイベントを発火させる場合に有効な方法となりますが、
JavaScript を実行させるためにイベントを発火させることが必要となります。

body

<button th:onclick="|alertBtn('${cp.result.value['message']}')|">ステータス</button>

JavaScript

function alertBtn(text){
    alert(text);
    return false;
}

方法② head,body にJavaScriptを記述

head,body にJavaScriptを記述した場合、Thymeleaf から値を受け取ることができます。

【POINT】
特別な処理なく値を渡せますが、javaScript タブ内への記述ではなくなるため、
javaScript のコードが煩雑化してしまいます。

head,body

<script>
    var text = "[[${cp.result.value['message']}]]";
    alert(text);
</script>

方法③ data属性を利用して値を渡す

body など、HTMLにdata属性を使用し、Javascript から取得させます。

【POINT】
Javascript から値を取得するため、コードをまとめることはできますが、
HTML 表示後のイベント出ない場合、正しく値を取得できない可能性があります。

body

<div id="phpData" th:data-message="|${cp.result.value['message']}|"></div>

JavaScript

window.onload = function() { 
    var getData = document.getElementById('phpData');
    var getMessage = getData.dataset.message;
    alert(getMessage);
}

data属性の場合、複数の値を1つのタグ内にセットすることも可能です。

body

<div id="phpData" th:data-message="|${cp.result.value['message']}|" th:data-message2="|${cp.result.value['message2']}|"></div>

JavaScript

window.onload = function() { 
    var getData = document.getElementById('phpData');
    var getMessage = getData.dataset.message;
    var getMessage2 = getData.dataset.message2;
    alert(getMessage);
    alert(getMessage2);
}

不具合やほかのやり方がある等あれば、
下記の「コンテンツに関しての要望はこちら」からご連絡ください。

開発情報・ナレッジ

変更・改訂履歴

前提

方法① 関数の引数としてセット

方法② head,body にJavaScriptを記述

方法③ data属性を利用して値を渡す

関連記事