在Java腳本中使用PHP變量

Question

我正在使用模板，並且JavaScript位於具有硬值的單獨的.js文件中。 我想基於MySQL查詢和php文件中的PHP變量來更改值。

我查找了幾個類似的答案，它們將.js代碼合並到html中，而不在.js代碼中創建變量（即使那是最好的方法）。

HTML：

<div class="padded"><div id="piechart" style=""> </div> </div>

JS：

  Morris.Donut({
    element: 'piechart',
    data: [
      {label: 'Option 1', value: 25 },
      {label: 'Option 2', value: 40 },
      {label: 'Option 3', value: 25 },
      {label: 'Option 4', value: 10 }
    ],
    colors: ["#3228db", "#34225e", "#1abc3c", "#24495e", "#9b51b6", "#15a5a6"],
    formatter: function (y) { return y + "%" }
 });

我想更改js腳本中的值以匹配PHP / MySQL中的變量。

Answer 1

首先：請記住，PHP是在服務器端執行的，這是在瀏覽器收到它可以執行的任何JavaScript之前的方式。 因此：您所要求的只有在用戶執行任何操作之前就知道所需的變量才是可能的-否則，您需要AJAX從服務器獲取新值，並且應該對其進行一些讀取。

如果獲得了變量，則可以簡單地使用PHP輸出javascript。 我假設這是您要更改的那些對象的“值”屬性，並且我假設從數據庫中獲取的值存儲在名為$values的數組中-只需用您真正得到的$values替換它即可。

Morris.Donut({
    element: 'piechart',
    data: [
      {label: 'Option 1', value: <?php echo $values[0] ?> },
      {label: 'Option 2', value: <?php echo $values[0] ?>},
      {label: 'Option 3', value: <?php echo $values[0] ?>},
      {label: 'Option 4', value: <?php echo $values[0] ?>}
    ],
    colors: ["#3228db", "#34225e", "#1abc3c", "#24495e", "#9b51b6", "#15a5a6"],
    formatter: function (y) { return y + "%" }
});

Answer 2

這里有幾種可能性，最簡單（但不是最優雅）的東西可能是

HTML：

...
<script type="text/javascript">

function getPiechartData() {

  //The folllowing is created via the template from MySQL

  return [
      {label: 'Option 1', value: 25 },
      {label: 'Option 2', value: 40 },
      {label: 'Option 3', value: 25 },
      {label: 'Option 4', value: 10 }
    ];
}

</script>
...

JS：

Morris.Donut({
    element: 'piechart',
    data: getPiechartData(),
    colors: ["#3228db", "#34225e", "#1abc3c", "#24495e", "#9b51b6", "#15a5a6"],
    formatter: function (y) { return y + "%" }
 });

Answer 3

您必須將PHP的值作為JavaScript發出； 那么它將在您的外部腳本中可用。 例如：

的PHP

<script>
    // option1 and option2 are numeric
    var option1 = <?php echo $option1; ?>;
    var option2 = <?php echo $option2; ?>;
    var colors = [
        <?php echo '"' . implode( '", "', $colors ) . '"'; ?>
    ]
</script>
<script src="external.js"></script>

然后，在external.js的（JavaScript）的變量option1 ， option2 ，和colors將可用。

您可能還需要考慮將變量放在單個對象中，以免使變量雜亂無章地占據全局空間：

的PHP

<script>
    // option1 and option2 are numeric
    var stuff = {
        option1: <?php echo $option1; ?>,
        option2: <?php echo $option2; ?>,
        colors = [
            <?php echo '"' . implode( '", "', $colors ) . '"'; ?>
        ]
    }
</script>
<script src="external.js"></script>