Question

我有三个文件index.html，getData.php和data.json

index.html - ＆gt;

<script type="text/javascript">
function load() {
      var jsonData = $.ajax({
                            url: "getData.php",
                            type: "GET",
                            data: {variable: "loadavg"},
                            dataType:"json",
                            async: false
                            }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 800, height: 400});
    }
</script>
<ul class="list">
<p>Load average <input id="loadAvg" type="button" value="Enter" onclick="load();" /> </p>
 </ul>

getData.php - ＆gt;

<?php 
// It reads a json formatted text file and outputs it.
if(isset($_GET["variable"]) == "loadavg"){
    $string = file_get_contents("data.json");
    echo $string;
     // if this works you should see in console 'graph on cosole'
    }
?>

data.json - ＆gt;

{
  "cols": [
        {"id":"","label":"HostName","type":"string"},
        {"id":"","label":"CPU","type":"number"},
       {"id":"","label":"Free Avg memory","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"lp10b2vapp01,w10"},{"v":21}]},
        {"c":[{"v":"lp10b2vapp01,w10"},{"v":15}]},
        {"c":[{"v":"lp10b2vapp01,w10"},{"v":73}]},
        {"c":[{"v":"lp10b2vapp01,w10"},{"v":60}]},
        {"c":[{"v":"lp10b2vapp01,w10"},{"v":48}]},
        {"c":[{"v":"lp10b2vapp01,w10"},{"v":40}]},
        {"c":[{"v":"lp10b2vapp01,w10"},{"v":36}]}
      ]
}

当我点击按钮时我无法看到输出（图表），请帮助我提前致谢

Answer 1

请勿使用async: false。这是非常糟糕的做法，因为它锁定了UI线程，使浏览器看起来像用户崩溃，直到请求完成。而是使用$.ajax为您提供的异步回调，在请求完成后更新页面的UI。试试这个：

function load() {
    $.ajax({
        url: "getData.php",
        type: "GET",
        data: {
            variable: "loadavg"
        },
        dataType: "json",
        success: function(jsonData) {
            var data = new google.visualization.DataTable(jsonData);
            var chart = new google.visualization.ColumnChart($('#chart_div')[0]);
            chart.draw(data, {
                width: 800, 
                height: 400
            });
        }
    });
}

另请注意，您需要获取PHP代码中的参数值以及检查它是否存在：

if (isset($_GET["variable"]) && $_GET["variable"] == "loadavg") 
{
    // code here...
}

无法验证PHP文件中的JS变量

1 个答案: