Ajax 响应文本 URL 不工作

Question

我正在尝试查询 mysql 数据库并将结果放入图表中。它有两个文件 index.php 和 getpiechartdata.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>

获取饼图data.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;
?>

Answer 1

查看幕后情况的一种简单方法是使用浏览器中的网络检查器（开发工具）。

在GoogleChrome中，打开开发工具(Ctrl + Shift + I / Cmd + Opt + I) 然后点击 Network 选项卡。
调用您的 Ajax 请求（打开开发工具面板）
单击刚刚添加到列表中的请求并检查它。请密切注意 Headers 和 Response 选项卡。

Ajax 响应文本 URL 不工作

Ajax responseText URL not working

php

mysql

ajax

google-visualization