从python将JSON数据传递给javascript答案

【问题标题】：Passing JSON data to javascript from python从python将JSON数据传递给javascript
【发布时间】：2020-08-20 15:26:38
【问题描述】：

我正在尝试将使用 python 从数据库中检索到的一些数据传递给 javascript。

下面的代码有效。我可以在 javascript 中访问数据，但一次只能传递一行。

#!le/usr/bin/env python3
import sys
import re
import datetime
import sqlite3
import json
import time
SQLDB = '/home/daylene/db/PiLN.sqlite3'
db = sqlite3.connect(SQLDB) 
db.row_factory = sqlite3.Row
cursor = db.cursor()
sql = '''SELECT segment, dt, set_temp, temp, pid_output
               FROM firing WHERE run_id=? ORDER BY dt;
          '''
p = ((54),)
cursor.execute(sql, p)
columns = [column[0] for column in cursor.description]
results = []
for row in cursor.fetchall():
    results.append(dict(zip(columns,row)))
print(json.dumps(results[-1]))

还有工作的javascript

  <script>
        $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            $.ajax({
              mimeType: 'application/json; charset=iso-8859-1',
              url:  'data.cgi',
              //data: JSON.stringify( query ),
              contentType: "application/json",
              dataType: 'json',
              method: 'POST',
              async: false,
              success:  function (response)
                {
                    //document.write(response);
 
                    var time = response["dt"];
                    var temp = response["temp"];
                    //document.write(response);
                    //for (var i in response) {
                     //   time.push(response.time);
                      //  temp.push(response.temp);
                    //}

                    var chartdata = {
                        labels: time,
                        datasets: [
                            {
                                label: 'time',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: temp
                            }
                        ]
                    };

                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                }
            
            
        });
    }
        </script>

取消注释document.write(response); 并更改为print(json.dumps(results)) 不起作用。 document.write(response); 没有返回任何内容

添加这个不起作用

for row in results:
    results1.append(json.dumps(row))
print(results1)

再添加这个也不行

results1 = []
for row in results:
    results1.append(json.dumps(row))
print(json.dump(results1)

print(results) 的输出（缩短）

[{"segment": 4, "dt": "2020-07-09 19:58:55", "set_temp": 1145, "temp": 1145.02, "pid_output": 83.49}, {"segment": 4, "dt": "2020-07-09 19:59:24", "set_temp": 1145, "temp": 1145.15, "pid_output": 80.76}, {"segment": 4, "dt": "2020-07-09 19:59:54", "set_temp": 1145, "temp": 1145.16, "pid_output": 80.6}, {"segment": 4, "dt": "2020-07-09 20:00:24", "set_temp": 1145, "temp": 1145.15, "pid_output": 80.73}, {"segment": 4, "dt": "2020-07-09 20:00:55", "set_temp": 1145, "temp": 1145, "pid_output": 83.73}, {"segment": 4, "dt": "2020-07-09 20:01:24", "set_temp": 1145, "temp": 1145.08, "pid_output": 82.1}, {"segment": 4, "dt": "2020-07-09 20:01:54", "set_temp": 1145, "temp": 1145.13, "pid_output": 80.99}]

感谢任何指导。

【问题讨论】：

您的“打印输出（结果）（缩短）”看起来像多行。如果您感到困惑，因为它全部打印在控制台中的一行上。试试：import pprint ; pprint(results)
不，我知道它不止一行。我想将整个内容发送到 JavaScript 并能够使用 response[x]["dt"] where x if a row number 访问数据。
你应该可以。你为什么用response["dt"];而不是response[x]["dt"] ？
这是一个有效的例子。我可以得到传递给 javascript 的一行的结果。当尝试传递整个“结果”变量时，document.write(response);在 javascript 中不生成任何内容。所以它没有正确通过。我只是不知道如何解决它。
我看不到您是如何返回 json 响应的。您只显示在控制台中打印它的代码。试试：return json.dumps(results)

标签： javascript json python-3.x

【解决方案1】：

从 Python 向 JS 前端提供数据的最简单方法是创建一个服务于 HTTP 请求的服务器。

以简单的烧瓶为例：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/my-data")
def get_data():

    my_data = [{"segment": 4, "dt": "2020-07-09 19:58:55"}, {}]

    return jsonify(my_data)

if __name__ == "__main__":
    app.run(port=8080, host="0.0.0.0")

然后您可以在您的 Javascript 中从 http://localhost:8080/my-data 请求数据。

【讨论】：

这是一个更大的项目的一部分，该项目已经使用了 jinja2 模板和谷歌图表。我正在尝试使用 chartjs 获取离线图表。图表将在模板内，需要动态更新。

【解决方案2】：

Bleh，我想通了。这不是代码，而是我试图传递的数据的大小。尝试较小的数组效果很好。

我终于想到检查 lighttpd 日志，我明白了。

(mod_cgi.c.588) response headers too large for /app/data.cgi

【讨论】：