如何将变量从 PHP 的 while 循环传递到 JavaScript？答案

【问题标题】：How to pass variables from while loop of PHP to JavaScript?如何将变量从 PHP 的 while 循环传递到 JavaScript？
【发布时间】：2016-06-01 09:26:31
【问题描述】：

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

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

这给了我两行的结果，每行包含下面列出的两个值：

现在我想将上面的值传递给 Java 脚本函数，以便它为我绘制图表，我的 javascript 代码如下：

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

那么如何将这个值传递给 JS ???

【问题讨论】：

标签： javascript php mysql

【解决方案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>

【讨论】：

【解决方案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
}
?>

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

【讨论】：

【解决方案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);
}

【讨论】：