Question

作为Ajax的新手，我不了解如何从php更改变量值。这是我的代码：

<?php

$pfstatetext = get_mypfstate();
$cpuusage= cpu_usage();
?>
<div id="show">
          <canvas id="chart-area2" width="300" height="300"/>
    </div>

<script>

    var pieData2 = [
            {
                value: <?= $pfstatetext;?>,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red :"
            },
            {
                value: <?= $cpuusage; ?>,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            }
];
window.onload = function(){
            var ctx2 = document.getElementById("chart-area2").getContext("2d");
            var myPie2 = new Chart(ctx2).Pie(pieData2);
             var myVar=setInterval(function(){myTimer()},10000);

                function myTimer() {
                 var ctx2 = document.getElementById("chart-area2").getContext("2d"); 
                 var myPie2 = new Chart(ctx2).Pie(pieData2);

}
        };


</script>

上面的代码每10秒重绘一次饼图，但每次在10秒后重绘饼图时，都不会获得'$ pfstatetext'和'$ cpuusage'的更新值。

那么我将使用Ajax进行哪些更改，以便每隔10秒绘制一个饼图，并更改'$ pfstatetext'和'$ cpuusage'的值。

Answer 1

简单地进行ajax调用，使用jquery javascript库。

我需要两个文件，一个用于数据，一个用于绘制图表。

数据文件（data.php）看起来像这样

<?php

    $pfstatetext = get_mypfstate();
    $cpuusage= cpu_usage();

    echo $pfstatetext."|||".$cpuusage;

?>

drawChart.php

function updateChart(){

    $.get( "data.php", function( data ) {

        data = data.split("|||");

        var pieData2 = [
                    {
                        value: data[0],
                        color:"#F7464A",
                        highlight: "#FF5A5E",
                        label: "Red :"
                    },
                    {
                        value: data[1],
                        color: "#46BFBD",
                        highlight: "#5AD3D1",
                        label: "Green"
                    }
        ];

        var ctx2 = document.getElementById("chart-area2").getContext("2d");
        var myPie2 = new Chart(ctx2).Pie(pieData2);
        var myVar=setInterval(function(){myTimer()},10000);

    });
    setTimeout(updateChart, 1000);
}

window.onload = updateChart();

如何使用Ajax从php获取更新的值？

1 个答案: