Javascriptの変数をphpに渡す

Question

上記ご指摘をいただきました点を踏まえて、改めて状況と質問をさせていただきます。
chart.jsを利用しており、以下のjsを外部ファイル化しております。ここで外部ファイル化しているのは、WPのプラグインの性質上、所与のものであるとお考えください。
ABC.js

function bargraph(){
    
    
    function floatFormat( number, n ) {
	var _pow = Math.pow( 10 , n ) ;

	return Math.round( number * _pow ) / _pow ;
}

    
    var PO_1=5.0;
    var PO_2=3.8;
    var PO_3=floatFormat(78/100*5,1);
    var PO_4=3.9;
    
    function avg1()
    {
    return floatFormat(( PO_1+ PO_2+ PO_3+ PO_4)/4,1);
    }    
    var PO_5= avg1;
    
 
 
    var data = {
  labels: ["A", "B", "C", "D", "E",],
  datasets: [
    {label: "総合評価",
     type:"bar",
     yAxisID: 'y-axis-1',
     backgroundColor: "rgba(0, 0, 255,0.3)",
                    borderColor: "rgba(0, 0, 255,0.3)",
                    borderWidth: 1,
                    hoverBackgroundColor: "rgba(255,99,132,0.4)",
                    hoverBorderColor: "rgba(255,99,132,1)",
                    data: [PO_1,PO_2, PO_3, PO_4, PO_5],},
      { label: "口コミ数",
       type:"line",
       tension:0,
      yAxisID: 'y-axis-2',
       backgroundColor: "rgb(5, 34, 120)",
       fill:false,
                      borderColor: "rgb(5, 34, 120)",
                      borderWidth: 1,
                      hoverBackgroundColor: "rgba(255,99,132,0.4)",
                      hoverBorderColor: "rgba(255,99,132,1)",
                      data: [700, 850, 300, 500, 680],}


  ]};


    var options={

  scales: {
    yAxes: [{
      position: "left",
              id: "y-axis-1",
      ticks: {
        fontColor:"#000000",
        stepSize: 1,
        beginAtZero:true,
        callback: function(value) {
                        return "⭐️ "+value;}
      },
     gridLines:{display:true,
          color:"rgba(0, 0, 255, 0.3)",  },},
          {
            position: "right",
                    id: "y-axis-2",

            ticks: {
              fontColor:"#000000",
              stepSize: 200,
              beginAtZero:true,
            },
           gridLines:{display:true,
                color:"rgba(0, 0, 255, 0.3)",  },}
    ],
 xAxes: [{
   tick:{
 fontColor:"#808080 ",
fontSize:12,
        },
                gridLines:{display:true,color:"rgba(255, 255, 255, 0)"},
  
      }]
     
    }
  };


    var ctx = document.getElementById("mybar");
    var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: data,
      options:options,
    });
  }

上記のABC.js上で得られたvar PO_5の変数を本体のphpファイルで様々な形で利用したいと考えております。例えば
DEF.php上

<div class="subtitle" style="margin-bottom:20px; float: left; width:380px; align:left";><Font Size="5" style="color:#808080  ;">総合評価</Font>[star rating="<?php echo $AVG;?>" type="rating"]&nbsp;<?php echo "(".$AVG."/5.00)";?></br></div>
<!--chart.jsで得られた変数を利用して作成したいタグ、変数を受け渡しできない-->

div style="width:600px; height;200px"><canvas id="mybar" width="600px" height="200px"></canvas></div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.1/Chart.bundle.js"></script>
<script>
bargraph();
</script> 
<!--chart.jsを利用したグラフを作成するタグ-->

＊ちなみに[star...のコードはWP上のショートコードになります。

$AVGにABC.jsのPO_5の変数を渡すことができず、その解決策を探しています。
DEF.phpの記載は一部ですが、様々な形でPO_5の変数をDEF.phpで使用したく考えております。

もちろん先のPHPファイルに変数を宣言して、これを外部jsファイルに受け渡すことができればそれも有効な解決策と考えております。

このような形での質問であればいかがでしょうか？

何卒、よろしくお願い申し上げます。

Comments

[kei344]

「labels: ["A", B", 」は「labels: ["A", "B", 」ですか？また、(a+b+c)で使われている変数が全て未定義です。

[SugiuraY]

①失礼いたしました。["A", "B", ・・・・」が正しいです。
②(a+b+c)の行は削除を失念いたしました。誤ったコードであるため、削除いたしました。重ねてお詫び申し上げます。

[kei344]

avg_1を得るためのコードがどんな内容かによって解決策は変わると思うのですが、そのコード（もしくはどういう処理をしているか）の開示は可能ですか？

[SugiuraY]

お返事有難うございます。追記した部分のコードでは、avg_1は使用しておりません。あくまでABC.jsから引用したい変数はPO_5となります。紛らわしくて申し訳ございませんが、混同を避けるために前半部分、即ち初期の書き込みを削除いたします。

[kei344]

PO_1からPO_4の数値はWordPress側に格納された数値ですか？固定値ですか？ユーザー入力ですか？

[SugiuraY]

お返事有難うございます。
wordpressに格納された数値になります。
正確には、wp(経由でmysql)に自分で大量に読み込ませた固定値で、それぞれの単一記述ごとに特定のidのPO_1〜PO4データをサーバーから引っ張ってきます。
上手に表現できているか不安ですが、宜しくお願い申し上げます。

Answer 1

ブラウザが PHP のサーバーから HTML を受信する段階では、すでに PHP の処理は全て終わっているものと思ってください。
厳密には終わっていないケースもあるのですが単純化するため割愛します。
少なくとも、順番が逆になることを利用して「先に実行された JavaScript の処理結果」を PHP 側から利用する方法はありません。

ではどのような方法をとるのかというと、 JavaScript の処理が終了してから、 PHP に対して２度目のリクエストを送信します。
１度目の PHP 処理はすでに終わっていますが、これから新しく始まる PHP の処理であれば JavaScript の結果を受け取ることが可能です。

例を示すと言いたいところですが、正直どういう目的でやろうとしているのかがわからないとピンポイントな例は出しにくいです。
というか根本的なところになってしまいますが、この質問は「問題に対してある解決策を図りたいが、それが可能なのか、その方法がわからない」というアプローチになっていると思います。
そうではなく、「この問題に対してどういう解決策を図れば良いか」を一旦質問なさった方が良いかもしれません。
「JavaScript から PHP に変数を渡す」ことなく簡単に解決する方法があるのかもしれません。

Comments

[SugiuraY]

ご指摘いただき、ありがとうございます、頂いた内容を踏まえて、上記の質問を加筆をしてみました。内容等に不十分な点またはわかりづらい部分があればまたご指摘ください。
よろしくお願い申し上げます。

Answer 2

渡すことは可能です。jQueryを使っているなら以下のような書き方ができます。
(あくまで例です。とりあえず渡せた証拠がコンソールログに出るようにしました)

var avg_1 =(a+b+c)/3;

$.ajax({
  type: 'POST',
  url: 'DEF.php',
  data: {
    avg_1 : avg_1
  },
  success: function(data) {
    console.log(data); //dataの中にphpでechoした値が戻ってくる
  }
});

<?php
  $AVG = $_POST['avg_1'];
  echo "(".$AVG."/5.00)";
?>

Answer 3

PHPプログラムがどのタイミングで動くのか、JavaScriptのプログラムがどのタイミングで動くのかを考えれば、時間をさかのぼって情報を渡す必要があることが分かるかと思います。

無理を言わず、具体的に何がやりたいのかを書くと、有用なアドバイスが得られる可能性があります。

Answer 4

POST、GETで値を渡すことは可能です。
ページ遷移を行わないのであれば、ajaxで一般的に引き渡します。

Answer 5

wordpressに格納された数値になります。 正確には、wp(経由でmysql)に自分で大量に読み込ませた固定値で、それぞれの単一記述ごとに特定のidのPO_1〜PO4データをサーバーから引っ張ってきます。

JavaScript で処理せず、PHPで処理すれば良い問題だと思います。JavaScript は特に数値処理に優れているわけでもないため、ほぼ全ての数値処理はPHPで行うことができます。

「chart.jsで得られた変数」という記述がありますが、chart.js はグラフ表示ライブラリなので具体的な数値を算出する目的のものではありません。（もしそういう機能があるにせよそれはPHPで処理できる範囲だと思われます）

Answer 6

PO_5が常に同じ値になるような気がして計算する必要性を感じないのですが、
何かユーザーが入力する値が存在するのであれば、これくらいの簡単な計算式であれば PHP に移植するのもアリだと思います。
つまりユーザーが入力した値だけを受け取れば計算は PHP でも可能ですよね。

値の性質にも依るところですが、基本的な絶対ルールとして、クライアントサイドから送られてくる値は信用してはいけないというものがあります。
ユーザーの入力は入力チェックしていたが、計算結果はしていないので、実際の計算と異なる値に偽装された、みたいなシチュエーションも起こります。サーバー側にも計算式がないと、検算のし様もありません。

どうしても計算はクライアントで行うならば、やはりリクエストの際にパラメーターとして送信してください。
ABC.php と BCD.php は別ページでしょうか？
それなら遷移の際に form を使うなどして値を送ってください。