在Javascript中使用PHP变量

我正在使用一个模板，JavaScript在一个单独的.js文件中，带有硬值。我想根据MySQL查询和PHP文件中的PHP变量更改这些值

我查找了几个类似的答案，它们将.js代码合并到html中，而不是在.js代码中创建变量（如果这是最好的方法的话）

HTML:

JS:

---

我想更改js脚本中的值以匹配PHP/MySQL中的变量

首先：请记住，PHP是在服务器端执行的，远远早于浏览器接收到它可以执行的任何javascript。因此：只有在用户做任何事情之前就知道了所需的变量，您才有可能要求使用AJAX，否则您需要AJAX从服务器获取新的值，并且应该对其进行一些阅读

如果您得到了变量，就可以使用PHP简单地输出javascript。我假设它是您要更改的对象的“value”属性，并且我假设您从数据库中获得的值存储在名为

$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 + "%" }
});

Morris.Donut({
元素：'piechart'，
数据：[
{标签：'选项1'，值：}，
{标签：'选项2'，值：}，
{标签：'选项3'，值：}，
{标签：'选项4'，值：}
],
颜色：[“3228db”、“34225e”、“1abc3c”、“24495e”、“9b51b6”、“15a5a6”]，
格式化程序：函数（y）{返回y+“%”
});

这里有一些可能性，最简单（但不是最优雅）的可能是

HTML:

---

您必须将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>

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

---

谢谢@EugenRiek的编辑。我也打算这么做；）@约翰尼斯。我不得不做两次——我的第一次尝试都是重写的，这是行不通的，因为

.js

文件从未经过PHP，这使得

毫无意义，但我不同意这一点。这是惯例，效果很好。a） OP没有说这是一个单独的文件。b） 您可以将服务器配置为解析.js c）不需要将javascript文件命名为.js-您可以使用一个输出javascript代码的.php文件，并使用“text/javascript”上下文类型发送它。哦，对不起。Op statet它是一个单独的文件。b） c）仍然有效；）我只是想说清楚：我并不反对从PHP创建JS文件，事实上——正如您所指出的——这是一种非常常见的策略。我反对具体的实现，OP提到JS是静态的和独立的

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

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

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