在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>