php - 通过对远程服务器的 getJSON 调用，Google 可视化表不显示

Question

我已经在互联网上搜索了几天，我认为这是一个相当常见的请求，即使用来自远程服务器的数据(JSON 数据表)填充本地服务器上的 Google 可视化表。

我在 Google Code Playground ( http://code.google.com/apis/ajax/playground/?type=visualization#json_data_table ) 上找到了一个编码示例，它帮助我入门。此示例非常适合将表条目直接硬编码到 html 文件中。

我不想对值进行硬编码，而是想使用来自远程服务器的 JSONP 请求填充本地 Google 可视化表。这是我驻留在远程服务器上的 php 文件的内容:

<?php
//connect to mysql database using authentication credentials 
require_once( "inc/<connection file>.inc" );

// Query table
$sql="select id, address from historical_sales order by id";

$result = mysqli_query($con,$sql); 

$table = array();

$table['cols'] = array(
    array(id => "id", label => "ID", type => "string"),
    array(id => "address", label => "Address", type => "string")
);

$rows = array();
while($r = mysqli_fetch_assoc($result)) {
    $temp = array();
    $temp[] = array("v" => $r["id"]);
    $temp[] = array("v" => $r["address"]); 

    $rows[] = array("c" => $temp);
}

// populate the table with rows of data
$table['rows'] = $rows;

// encode the table as JSON
$jsonTable = json_encode($table);

header('Content-type: application/json');

echo $_GET['callback'] . '(' . $jsonTable . ')'; 
?>

该文件的输出如下:

({"cols":[{"id":"id","label":"ID","type":"string"},{"id":"地址","label":"地址","type":"string"}],"rows":[{"c":[{"v":"1"},{"v":"355 W Honeysuckle Dr"}]},{ "c":[{"v":"2"},{"v":"1688 W Yosemite Pl"}]},{"c":[{"v":"3"},{"v":"3800 S Cantabria Cir A-1001"}]},{"c":[{"v":"4"},{"v":"3560 S Hollyhock Pl"}]},{"c": [{"v":"5"},{"v":"1645 W Lantana Ct"}]}]})

我的 HTML 文件包含以下代码:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>   
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">                                                               
    google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
$(document).ready(function()
{
    function drawVisualization() {
    // Create and populate the data table.
    $.getJSON("http://mhsw.com/realestate/jsonp-xs.php?callback=?", {},function (jdata)
    {var JSONObject = jdata;
         document.getElementById("jid_label").innerHTML=JSONObject.cols[0].label;
         document.getElementById("jaddress_label").innerHTML=JSONObject.cols[1].label;
    });
var data = new google.visualization.DataTable(JSONObject, 0.6);
// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));

visualization.draw(data, {'allowHtml': true});
                                                                          }                                                                          
google.setOnLoadCallback(drawVisualization);
});

</script><div id="table"></div>
<p>
ID: <span id="jid_label"></span><br />
Address: <span id="jaddress_label"></span><br />
</p>

我相当确定 HTML 文件中的回调函数正在接收 JSON 数据，因为我正在显示 ID 和地址标签，但是，Google 可视化表不会显示。任何有关此问题的帮助将不胜感激。

Answer 1

这是解决该问题的新 HTML 文件:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" ></script>   
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">                                                               
    google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">


$(document).ready(function()
{
    function drawVisualization() 
    {
        // Create and populate the data table.
        $.getJSON("http://mhsw.com/realestate/jsonp-xs.php?callback=?", {},function (jdata)
        {
            var JSONObject = jdata;
            document.getElementById("jid_label").innerHTML=JSONObject.cols[0].label;
            document.getElementById("jaddress_label").innerHTML=JSONObject.cols[1].label;
            var data = new google.visualization.DataTable(JSONObject, 0.6);

            // Create and draw the visualization.
            visualization = new google.visualization.Table(document.getElementById('table'));
            visualization.draw(data, {'allowHtml': true});
        });
    }
    google.setOnLoadCallback(drawVisualization);
});

</script><div id="table"></div>
<p>
ID: <span id="jid_label"></span><br />
Address: <span id="jaddress_label"></span><br />
</p>