如何将 JSON 数据从 python 返回到 javascript？ [关闭]答案

【问题标题】：How do I return JSON-data from python to javascript? [closed]如何将 JSON 数据从 python 返回到 javascript？ [关闭]
【发布时间】：2016-08-21 12:14:42
【问题描述】：

我正在处理一个 pythonfile，它返回变量“distance”并将其发送到一个 javascriptfile，我可以将值放在我的网页上。

我的问题是我不知道如何将值从 python 发送到 javascript。我听说你必须让 pythonfile 以 JSON 格式返回，然后发出一个 ajax 请求，但我无法在任何地方找到如何做到这一点。

我的问题是：如何设置使我在 javascript 中获取 JSON 数据的连接？如果有人向我展示使用代码，我真的很感激，我对 python 和 javascript 都很陌生..

编辑：数据来自带有距离传感器的 RaspberryPi。我的python代码是：

import RPi.GPIO as GPIO
import time
import io, json

GPIO.setmode(GPIO.BCM)
TRIG = 14
ECHO = 15

GPIO.setup(TRIG,GPIO.OUT)
GPIO.setup(ECHO,GPIO.IN)

revers = 1

while revers == 1:

    GPIO.output(TRIG,0)
    time.sleep(0.5)

    GPIO.output(TRIG,1)
    time.sleep(0.00001)
    GPIO.output(TRIG,0)

    while GPIO.input(ECHO)==0:
        pulse_start = time.time()

    while GPIO.input(ECHO)==1:
        pulse_end = time.time()

    pulse_duration = pulse_end - pulse_start
    distance = pulse_duration * 17150
GPIO.cleanup()

我还没有用 javascript 编写任何东西，只是因为我不知道如何进行 ajax 调用，但我的目标是将可变距离转换为 JSON 格式并将其放在我的网页上。

【问题讨论】：

您在这里遗漏了大量细节。你在说什么“pythonfile”？想必这是某种 Python 网络框架，但到目前为止你还没有说是哪一个，或者你有什么代码。
贴出你已经编码的代码
对此我很抱歉，我是使用 stackoverflow 的新手。我现在已经用我目前拥有的代码编辑了我的帖子

标签： javascript jquery python json ajax

【解决方案1】：

你服务器上的python程序可以返回任何你想要的格式的值，但是json是一种方便的格式，python程序和javascript都可以轻松处理。

您的 javascript 需要向服务器发送请求。该请求将指定它想要检索 python 文件。请注意，发送 javascript 请求是为了响应某些事件（例如用户单击按钮）。

python 程序将驻留在服务器目录结构中的某个位置。如果你的服务器设置正确，那么当收到对python文件的请求时，服务器不会返回python文件的文本，而是执行python程序并返回python程序的输出。

发出 ajax（即 javascript）请求的最简单方法是使用 jquery。实际上有 10,000 个关于如何使用 jquery 发出 ajax 请求的教程、博客等。这是一个：

http://www.tutorialspoint.com/jquery/jquery-ajax.htm

以下是 jquery 文档中的相关信息：

https://api.jquery.com/jquery.get/

我对 python 和 javascript 都很陌生..

那么你想要的程序很可能太复杂了。

这是一个 ajax 示例：

page.html

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>

<body>
  <p>Hello</p>
  <button id="my_button" type="button">Click me</button>
  <div id="ajax_results"></div>

<!-- Download jquery library: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<!-- My jquery code: -->
<script>
  $("#my_button").on('click', function() {
    $.get("http://localhost:8080/cgi-bin/my_prog.py", function(data) {
      $("#ajax_results").text(data);
    })
  });
</script>

</body>
</html>

我在浏览器中使用以下网址向本地服务器发出请求：

http://localhost:8080/page.html

在我的浏览器中加载 page.html。当页面加载时，我的 jquery 代码会执行，它会向按钮添加一个 onclick 处理程序：

$("#my_button").on('click', function() {....

之后，如果按钮被点击，函数就会执行。

以下 python 程序位于我本地服务器上的目录中：

my_prog.py

#!/usr/bin/env python3.4

print("Content-Type: text/html\n\n")
distance = 10
print(distance)  #This is the body of the response

如果我点击网页中显示的按钮，jquery 代码会向服务器发送请求文件 my_prog.py:

$.get("http://localhost:8080/cgi-bin/my_prog.py", ....

我的服务器设置为执行该文件——而不是返回文件的文本——然后服务器返回程序的输出作为响应。

当jquery代码收到服务器的响应时，jquery调用如下函数：

function(data) {
   $("#ajax_results").text(data);
})

将响应的主体作为参数传递。该函数将响应的主体数据插入到 id 为“ajax_results”的 html 标记中。因为响应的正文是字符串“10”，所以网页中显示的是10。

【讨论】：