質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.32%

Javascriptの変数をphpに渡す

解決済

回答 6

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 1,703
SugiuraY

SugiuraY

score 249

上記ご指摘をいただきました点を踏まえて、改めて状況と質問をさせていただきます。
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ファイルに受け渡すことができればそれも有効な解決策と考えております。

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert6 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • SugiuraY

    SugiuraY

    2016/05/09 01:12

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

    キャンセル

  • kei344

    kei344

    2016/05/09 01:17

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

    キャンセル

  • SugiuraY

    SugiuraY

    2016/05/09 01:30

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

    キャンセル

回答 6 件

link

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+1

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+1

渡すことは可能です。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)";
?>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+1

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/09 00:47

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

    キャンセル

link

checkベストアンサー

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る