如何将PHP的while循环中的变量传递到JavaScript？

Question

我正在使用Google APIs创建一个图表，我使用了Google的Java Script源代码。在PHP中，我使用while循环来获取一些数组行，这些数组是通过查询获取的，这个mysql查询工作正常，并且获取到的数组值也是正确的（当我在PHP中echo时）。但问题是如何将这些值传递给JavaScript函数？我的PHP代码如下：

while ($graph_result = mysqli_fetch_row($graph)) 
{
    $graphCount = $graph_result[0];
    $graphMonth = $graph_result[1];
    echo $graphCount; // This works
    echo $graphMonth;
}

这将给我两行结果，每行包含以下两个值：

现在我想将上述值传递给JavaScript函数，以便为我绘制图表，我的JavaScript代码如下：

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Months', 'users'],
        [graphMonth, graphCount]  // Here I have to place PHP values !
    ]); 
}

那么如何将这些值传递到JS中？

- Abhijit Kumbhar

Answer 1

尝试以下代码，

在PHP中

$i = 0;
while ($graph_result = mysqli_fetch_row($graph)) 
{
    $graph_values[$i]["count"] = $graph_result[0];
    $graph_values[$i]["month"] = $graph_result[1];
    $i++;
}

在脚本中，

<script>
    <?php foreach($graph_values as $key){ ?>
    drawChart('<?php echo $key["count"]; ?>', '<?php echo $key["month"]; ?>');
    <?php } ?>

function drawChart(graphCount, graphMonth) {
    var data = google.visualization.arrayToDataTable([
        ['Months', 'users'],
        [graphMonth, graphCount] 
    ]); 
}
</script>

- Gayathri

Answer 2

<?php while ($graph_result = mysqli_fetch_row($graph)) 
{
   ?>
<script>
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Months', 'users'],
        [<?php echo $graph_result[0]; ?>, <?php echo $graph_result[1]; ?>]
    ]); 
}
</script>
<?php
}
?>

我不知道这是否是最佳实践。

- Abhishek Gurjar

Answer 3

你可以使用json来实现这个功能。
在while循环中，构建一个关联数组并将其编码为json：

$jsonArray = array();
while ($graph_result = mysqli_fetch_row($graph)) 
{
    $graphCount = $graph_result[0];
    $graphMonth = $graph_result[1];
    $jsonArray[] = array($graphCount, $graphMonth);
}
echo '<div id="json">' . json_encode($jsonArray) . '</div>';

然后在你的JavaScript中恢复它：

var json_data = JSON.parse(document.getElementById('json').innerHTML);
function drawChart(json_data) {
    var data = google.visualization.DataTable();
    data.addColumn('number','Months');
    data.addColumn('number','users');
    data.addRows(json_data);
}

- Nicolas P.