如何在 JavaScript 中插入 MySQL 值？

Question

我正在为我们学校制作一个项目，我需要一个条形图。我决定使用 Morris Js，因为它在我下载的 Bootstrap 主题中有一个很好的示例。我的问题是我不知道如何将 MySQL 值从数据库中获取到我的 JavaScript 中。

这是条形图的 javascript 代码：

    <script type="text/javascript">
    $(function() {
    Morris.Bar({
    element: 'morris-bar-chart',
    data: [{
        device: 'iPhone',
        geekbench: 136
    }, {
        device: 'iPhone 3G',
        geekbench: 137
    }, {
        device: 'iPhone 3GS',
        geekbench: 275
    }, {
        device: 'iPhone 4',
        geekbench: 380
    }, {
        device: 'iPhone 4S',
        geekbench: 655
    }, {
        device: 'iPhone 5',
        geekbench: 1571
    }],
    xkey: 'device',
    ykeys: ['geekbench'],
    labels: ['Geekbench'],
    barRatio: 0.4,
    xLabelAngle: 35,
    hideHover: 'auto',
    resize: true
 });
 });
 </script>

我是 Morris JS 的新手。请帮忙。这是我到目前为止所尝试的。

<script type="text/javascript">
             // Bar Chart

                             <?php
                            $query = mysql_query("select * from product") or die(mysql_error());
                            while ($row = mysql_fetch_array($query)) {
                                ?>
Morris.Bar({
    element: 'morris-bar-chart',
    data: [{
        device: <?php echo "'" . $row['product_name'] . "'" . ','; ?>
        geekbench: <?php echo "'" . $row['product_stock'] . "'" ; ?>
    }],
    xkey: 'device',
    ykeys: ['geekbench'],
    labels: ['Geekbench'],
    barRatio: 0.4,
    xLabelAngle: 35,
    hideHover: 'auto',
    resize: true
});
});
<?php }; ?>
    </script>

Answer 1

从数据库中检索值后，您需要将它们从PHP 打印到JavaScript 代码。最常见的方法如下：

<script>
var valueFromDatabase = <?php echo $value; ?> ;

请记住，PHP 在提供HTML 页面之前在服务器端运行，因此您正在执行的操作，在PHP for-loop 中插入JavaScript 将不起作用。实际上，我认为您上面的内容根本不应该运行，因为 PHP 语法没有意义。

如果您想从 PHP 数据库检索中打印出每个值，您最好在两种语言中都使用数组。然后您可以使用PHP's json_encode() 打印出数组

var jArray= <?php echo json_encode($phpArray ); ?>;

另外请注意，您需要将数据库检索结果移动到 PHP 数组中才能执行此操作。你还没有这样做。您可以在此 SO 帖子 retrieve data from db and display it in table in php .. see this code whats wrong with it? 中看到这样做的示例。

Answer 2

<script type="text/javascript">
    Morris.Bar({
        element: 'morris-bar-chart',
        data: [
        <?php
        $query = mysql_query("select * from product");
        while ($row = mysql_fetch_array($query))
        {?>
            {
            device: "<?php echo $row['product_name'];?>",
            geekbench: [<?php echo $row['product_stock'];?>]
            },
        <?}?>
        ],
        xkey: 'device',
        ykeys: ['geekbench'],
        labels: ['Geekbench'],
        barRatio: 0.4,
        xLabelAngle: 35,
        hideHover: 'auto',
        resize: true
    });
</script>