Ajax responseText URL不起作用

时间:2015-05-13 18:48:37

标签: php mysql ajax google-visualization

我正在尝试查询mysql db并将结果放入图表中。它有两个文件index.phpgetpiechartdata.php。这两个文件都在/public_html/文件夹中的远程服务器上。

我不确定index.php是否甚至调用我的getpiechartdata.php脚本。虽然从getpiechartdata.php返回的数据(直接调用data.php时)看起来像这样。

{ "cols": 
  [ {"id":"","label":"Libraries","pattern":"","type":"string"}, 
    {"id":"","label":"Count","pattern":"","type":"number"} ], 
  "rows": [ {"c":[{"v":"/usr/lib64/crti.o","f":null},
                  {"v":77005,"f":null}]}, 
            {"c":[{"v":"/usr/lib64/crtn.o","f":null},
                  {"v":77005,"f":null}]}, 
            {"c":[{"v":"/lib64/ld-2.11.3.so","f":null},
                  {"v":53922,"f":null}]}, 
            {"c":[{"v":"/lib64/libc-2.11.3.so","f":null},
                  {"v":53922,"f":null}]}]
}

我不知道如何测试url:ajax调用我的php脚本是否正常工作。如果有人能给我一些指针,我会很高兴。

<html>
<head>
<!--Load the AJAX API-->
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  <script type="text/javascript">

// Load the Visualization API and the piechart,table package
   google.load('visualization', '1', {'packages':['corechart','table']});

  function drawItems(syshost) {

          // document.write(syshost);

          var jsonPieChartData = $.ajax({url: "getpiechartdata.php",data: "q="+syshost,dataType:"json", async: false}).responseText;

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

          // Instantiate and draw our pie chart, passing in some options.
          var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
          chart.draw(piechartdata, {
          width: 700,
          height: 500,
          chartArea: { left:"5%",top:"5%",width:"90%",height:"90%" }
          });
  }
   </script>
</head>

<body>
<h1> Welcome to UTKA! </h1>

  <form>
  <fieldset>
  <legend>Most Used Libraries Till Date</legend>
  <p>Select Syshost
  <!-- <select name="users" onchange="drawItems(this.value)">   -->
  <select name="users" onchange="drawItems(this.options[this.selectedIndex].value)">

<?php

try {
    include (__DIR__ ."/include/conn.php");
    $conn = new PDO("mysql:host=$servername;dbname=$db", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql = "SELECT DISTINCT(build_syshost) AS syshost  
            FROM utka_link
            ORDER BY syshost ASC";

    $query = $conn->prepare($sql);
    $query->execute();

    foreach($query->fetchAll(PDO::FETCH_ASSOC) as $row){
        echo '<option value='. $row['syshost'] . '>'. $row['syshost'] . '</option>';
    }
}
catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}
$conn = null;
?>
</select></fieldset></form>
</body>
</html>

getpiechartdata.php

<?php
//  $q=$_GET["q"];
  $q='darter';;
try {
        include (__DIR__ ."/include/conn.php");
        $conn = new PDO("mysql:host=$servername;dbname=$db", $username, $password);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        $sql = "SELECT object_path AS Libraries, module_name AS ModuleName, count(date) AS Count 
                FROM utka_link, join_link_object, utka_object 
                WHERE build_syshost='$q' AND 
                utka_link.link_id = join_link_object.link_id AND 
                join_link_object.obj_id = utka_object.obj_id 
                GROUP BY object_path 
                ORDER BY Count DESC
                LIMIT 10";

        $query = $conn->prepare($sql);
        $query->execute();

        $result = $query->fetchAll(PDO:: FETCH_ASSOC);

        echo "{ \"cols\": [ {\"id\":\"\",\"label\":\"Libraries\",\"pattern\":\"\",\"type\":\"string\"}, {\"id\":\"\",\"label\":\"Count\",\"pattern\":\"\",\"type\":\"number\"} ], \"rows\": [ ";

        $total_rows = $query->rowCount();
        $row_num = 0;

        foreach($result as $row){
                $row_num++;
                if ($row_num == $total_rows){
                        echo "{\"c\":[{\"v\":\"" . $row['Libraries'] . "\",\"f\":null},{\"v\":" . $row['Count'] . ",\"f\":null}]}";
                } else {
                        echo "{\"c\":[{\"v\":\"" . $row['Libraries'] . "\",\"f\":null},{\"v\":" . $row['Count'] . ",\"f\":null}]}, ";
                }
        }
        echo " ] }";
}
catch(PDOException $e) {
        echo "Error: " . $e->getMessage();
}
$conn = null;
?>

1 个答案:

答案 0 :(得分:0)

通过在浏览器中使用网络检查器(开发工具),可以轻松了解幕后发生的事情。

  1. 在Google Chrome中,打开开发工具( Ctrl + Shift + I / Cmd + 选择 + I )并点击Network标签。
  2. 调用您的Ajax请求(打开开发工具面板)
  3. 单击刚刚添加到列表中的请求并进行检查。请密切关注HeadersResponse标签。