如何将 JSON 数据从 python 返回到 javascript

How do I return JSON-data from python to javascript?

本文关键字：python 返回 javascript 数据 JSON      更新时间：2023-09-26

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

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

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

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

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格式并将其放在我的网页上。

服务器上的 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 示例：

页.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>

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

http://localhost:8080/page.html

在我的浏览器中加载页面.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);
})

将响应的主体作为参数传递。 该函数将响应的正文 data 插入到 id 为 "ajax_results" 的 html 标记中。 由于响应的正文是字符串"10"，因此网页中会显示 10。

相关文章：