開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2022年2月1日 (火)

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

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

前提

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:attr="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:attr="data-message=${cp.result.value['message']},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);
}


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

解決しない場合はこちら コンテンツに関しての
要望はこちら