ajax json query 直接到 python 生成 html gets undefined

Question

我已经挣扎了三个星期了，我已经走到了死胡同。系统管理员是 s*tty 开发人员 :)

我正在尝试构建轻量级的 cgi-bin python 脚本来收集数据并将其转换为 json 格式。然后我使用普通 html 页面对 python 脚本进行 ajax 查询以获取数据并绘制我的图表（定期，人们喜欢实时的东西）

这些应该尽可能轻，因为它们适用于覆盆子。

我的一个 python 收集数据的脚本

#!/usr/bin/python

import sqlite3
import gviz_api

# enable debugging
import cgitb
cgitb.enable()

def dict_factory(cursor, row):
    d = {}
    for idx, col in enumerate(cursor.description):
        d[col[0]] = row[idx]
    return d

connection = sqlite3.connect("templog.db")
connection.row_factory = dict_factory
cursor = connection.cursor()
cursor.execute("select temp, status from data where ID = (select MAX(ID) from data)")
# fetch all or one we'll go for all.
results = cursor.fetchall()
connection.close()

schema = {"temp": ("number", "temp"),"status": ("number", "status")}
data = results

# Loading it into gviz_api.DataTable
data_table = gviz_api.DataTable(schema)
data_table.LoadData(data)
json = data_table.ToJSon(columns_order=("temp", "status"),order_by="temp")
#print results

#print "Content-type: application/json\n\n"
print "Content-type: application/json"
print

print json

当我在浏览器上打开它时，它就像一个魅力，它以 Google jsapi

的正确格式为我提供了我需要的东西

{"rows":[{"c":[{"v":21.062},{"v":0}]}],"cols":[{"type":"number","id":"temp","label":"temp"},{"type":"number","id":"status","label":"status"}]}

下面是我的 html，它需要来自 python 脚本的 json 数据来绘制图表

    <html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">

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

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawTable);

    function drawTable() {
      var jsonData = $.ajax({
          type: "GET",
          url: "http://192.168.1.123:8099/cgi-bin/test.py",
          dataType:"json",
          async: false
          }).responseText;
          alert(jsonData);

      // 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.LineChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }

    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

不幸的是，当 html 直接向 python 脚本进行 ajax 查询时，我收到 "undefined" 警报。

然后我将 json 输出 1:1 复制到纯静态 html 文件并将 ajax URL 替换为 .html 而不是动态.py，它有效。

我的问题是 - 我尝试做的事情是否有一些限制，或者我的代码有问题吗？

我的代码基于示例 https://developers.google.com/chart/interactive/docs/php_example https://developers.google.com/chart/interactive/docs/dev/gviz_api_lib

Answer 1

如果我没看错你的 javascript，responseText 属性只会在 请求完成后 设置。通常，这些事情是异步执行的，因此您注册一个函数，以便在接收到数据后调用。例如

function drawTable() {
  var drawChart = function(jsonData) {
      // 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.LineChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
  };

  $.ajax({
      type: "GET",
      url: "http://192.168.1.123:8099/cgi-bin/test.py",
      dataType:"json",
      async: false
  }).done(drawChart);

}

可以在 jquery ajax documentation 中找到更多示例。

ajax json query 直接到 python 生成 html gets undefined

ajax json query directly to python generated html gets undefined

python

ajax

jquery

json