如何获取Python和JavaScript以使用JSON进行通信

是否曾经想过如何在两种编程语言之间发送数据?曾经尝试发送一个对象或多个数据吗?

今天,我将向您展示如何使用JSON将数据从JavaScript发送到Python。我将介绍如何设置Web服务器以及所需的所有代码。

先决条件

您将需要一些入门知识。我将在已经安装了Python的Mac上运行。您应该能够使用Linux很好地遵循。如果您使用的是Windows,则需要下载并安装Python,也许还需要掌握命令行技能。

您将需要pip(Python的软件包管理器)。默认情况下,此版本是在Python版本高于2.7.9的情况下安装的。

服务器设置

您需要一台服务器,以服务 Python到网页。有很多选择。如果已经安装了服务器,则可以跳过此步骤。

在这里可以使用许多选项。龙卷风是一个不错的选择,Twisted也是如此(我之前曾为DIY网络摄像机写过有关Twisted的文章)。我将在这个项目中使用Flask。

使用pip(通过命令行)安装Flask:

pip install Flask

就是这样!有一些设置选项,但是只要安装正确,就可以了。

您可能希望考虑使用Python虚拟环境,但这完全是可选的。

在您喜欢的文本编辑器或集成开发环境(IDE)中创建一个新文件。我正在使用Sublime Text 3和PyCharm,但是请使用您喜欢的任何东西。 / strong>行定义了称为 output 功能方法,该函数将在调用此端点时运行。这些方法不必使用与端点相同的名称,可以使用任何合适的名称。此方法内有一个简单的 Hello,World!字符串。最后,将脚本设置为在请求时可以实际运行:

if __name__ == "__main__":	app.run()

继续,然后将该脚本另存为 json_io.py 在合适的位置。返回您的终端并导航到您的项目文件夹。运行脚本:

python json_io.py

python 一词用于告诉计算机以下文件应作为Python脚本运行。之后的文件名是您希望作为Python运行的文件的名称。如果一切正常,您应该在终端上看到一条状态消息:

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

这将向您显示服务器正在运行的IP地址以及端口。它们分别是 127.0.0.1 5000 。您可以按 CTRL > C 停止运行,但暂时不要执行此操作。

在浏览器中输入地址,然后应该会看到世界您好!出现在屏幕上。现在,您已经成功设置了Python服务器并编写了第一个脚本!如果进行任何更改,则需要重新启动服务器(停止脚本,然后再次运行它)。

如果要在同一网络的另一台计算机上查看脚本,请更改 app.run()至:

app.run("0.0.0.0", "5010")

该行有两部分。第一个命令告诉Flask在您的本地IP地址上提供文件(即使这不是您的IP地址,也请确保将其保持为 0.0.0.0 )。第二部分指定端口。您可以根据需要更改端口。再次运行脚本(记住要保存并重新启动)。

You should now be able to access your scripts from a different computer on the same network. Make sure to use your IP address (run ifconfig in the command line) and the port you entered previously. You may need to configure your firewall if you are using one.

控制台将显示HTTP响应以及连接到服务器的任何设备的IP地址:

通知端点 / df 如何返回404错误?端点未设置!如果您希望通过Internet访问此端口,请查看端口转发。

模板

现在,您的服务器已设置完毕,现在该编写一些模板了。您将使用JSON在Python和Javascript之间发送数据,并且模板可以简化此过程。我们已经写了有关JSON过去的内容,因此,如果不确定,请继续阅读。

您将需要使用模板语言。 Jinja2随Flask一起提供,因此不需要额外的设置。

模板语言与Web服务器结合使用。它获取Python脚本的输出(后端代码),并易于使用HTML(前端)向用户输出。请务必注意,模板请勿用于逻辑!将逻辑保持在Python中,并仅使用模板显示数据。如果您开始尝试使模板变得复杂,那就太麻烦了。

在项目目录中创建一个名为 templates 的文件夹。 Flask将该文件夹内的文件识别为模板文件。不要在此处放置任何Python脚本,在这里您可以放置​​HTML文件。

创建一个名为 index.html 的文件。在其中放置以下代码:

{{ name }}

这是访问名为 name 的数据的方法,该数据可在脚本内找到。返回您的 json_io.py 。脚本,然后修改输出功能。输入以下代码,而不是返回 hello world

return render_template("index.html", name="Joe")

这将加载您之前创建的 index.html 文件,并替换为字符串 Joe 的{{name}} 模板标签。您可以使用此方法在模板文件夹内加载任何页面,并向其传递任意数量的数据。

代码

现在您知道模板的工作原理,这是完整的HTML您需要的代码。将其粘贴到您的 index.html 文件中:

<script class="lazy" data-original="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><script type="text/javascript">// setup some JSON to usevar cars = [	{ "make":"Porsche", "model":"911S" },	{ "make":"Mercedes-Benz", "model":"220SE" },	{ "make":"Jaguar","model": "Mark VII" }];window.onload = function() {	// setup the button click	document.getElementById("theButton").onclick = function() {		doWork()	};}function doWork() {	// ajax the JSON to the server	$.post("receiver", cars, function(){	});	// stop link reloading the page event.preventDefault();}</script>This will send data using AJAX to Python:<br /><br /><a id="theButton">Click Me</a>

请注意,它不包括CSS或任何HTML标头。这些是网页所必需的(此示例在没有它们的情况下将无法工作),因此,如果您愿意,可以在W3Schools上进行研究。

此文件中没有太多内容。设置了拉力赛车的JSON列表。有一点文字和一个按钮。按下按钮后, jQuery 用于 POST 将汽车列表发送到服务器。这将转到接收器端点,您将在下一步创建该端点。如果您想了解更多有关在这种情况下如何工作的信息,请确保阅读我们的jQuery指南。

这是 json_io.py 所需的代码:

#!flask/bin/pythonimport sysfrom flask import Flask, render_template, request, redirect, Responseimport random, jsonapp = Flask(__name__)@app.route('/')def output():	# serve index template	return render_template('index.html', name='Joe')@app.route('/receiver', methods = ['POST'])def worker():	# read json + reply	data = request.get_json()	result = ''	for item in data:		# loop over every row		result += str(item['make']) + '\n'	return resultif __name__ == '__main__':	# run!	app.run()

此代码定义了两个端点。默认的( / )用于上一个html页面。按下按钮后,将向 / receiver 端点发出 POST 请求。路由定义的第二部分( methods = [‘POST’] )定义了如何访问此页面。由于指定了 POST ,因此此路由将拒绝任何其他http请求(例如 GET )。

/ receiver 端点仅循环遍历每个JSON行,并将汽车品牌附加到字符串,然后在循环后返回。 JSON存储在 data 变量中,并且使用 request.get_json()时,Python知道这是一个JSON对象。可以将 for循环中的 item 变量视为一行数据。可以通过在方括号中使用其名称来访问每一行的不同元素( item ['make'] )。

打开浏览器开发人员工具( CMD > ALT > I ),然后导航至网络标签。按下按钮,您应该看到服务器响应出现:

尝试修改初始JSON并查看会发生什么。让我们对Python进行修改,使其在某些方面有所不同,具体取决于JSON。这是 for循环所需的新代码:

这使用简单的if语句来更改输出,具体取决于输入。您可以轻松地将其修改为写入数据库,或运行其他代码。现在是这样:

您现在应该对如何设置Python服务器以及如何响应JSON请求有扎实的了解。

您喜欢编码吗?在JavaScript中?尝试编写对声音敏感的机器人动画的脚本。

标签: JavaScript Python Web开发