如何让python和javascript使用json进行通信

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

有没有想过如何在两种编程语言之间发送数据？是否尝试发送一个对象或多个数据段？

python-js-json

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

先决条件

你需要一些东西来开始这个项目。我将在已经安装了Python的Mac上运行。您应该能够很好地使用Linux。如果您使用的是Windows，那么您需要下载并安装Python，也许还需要学习一下您的命令行技能。

您将需要pip，一个Python包管理器。默认情况下，在Python版本大于2.7.9的情况下安装。

服务器设置

您需要一个服务器来为网页提供Python服务。有很多选择。如果已经有服务器设置，可以跳过此步骤。

这里有很多选择。Tornado是一个不错的选择，就像Twisted一样（我以前为DIY网络摄像机写过Twisted）。我将在这个项目中使用烧瓶。

使用pip（通过命令行）安装烧瓶：

pip install Flask

就这样！安装有几个选项，但只要安装正确，就可以了。

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

python设置

在您喜爱的文本编辑器或集成开发环境（IDE）中创建新文件。我用的是Sublime Text 3和PyCharm，但是用你喜欢的任何东西。

现在执行烧瓶的一些初始设置：

from flask import Flaskapp = Flask(__name__)

这将导入所需的模块并配置应用程序。现在设置路径：

@app.route("/output")def output():return "Hello World!"

这将配置一个路径，它类似于网站的页面。这有时可以称为端点或路由。

def output（）行定义了一个名为output的函数或方法，该函数或方法将在调用此端点时运行。这些方法不必使用与端点相同的名称——可以使用任何合适的名称。这个方法里面是一个简单的你好，世界！字符串。最后，将脚本设置为在请求时实际运行：

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

继续并将此脚本另存为json_输入输出在合适的位置。返回终端并导航到项目文件夹。运行脚本：

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&gt；C停止此运行，但暂时不要这样做。

在你的浏览器中输入地址，你会看到你好，世界！出现在屏幕上。现在您已经成功地安装了Python服务器并编写了第一个脚本！如果进行任何更改，则需要重新启动服务器（停止脚本，然后再次运行它）。

如果要在同一网络上的其他计算机上查看脚本，请更改应用程序运行（）至：

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

这条线有两部分。第一个命令告诉Flask在您的本地IP地址上提供文件（确保您将其保持为0.0.0.0，即使这不是您的IP地址）。第二部分指定端口。如果您愿意，可以更改端口。再次运行脚本（记住保存并重新启动）。

现在，您应该能够从同一网络上的其他计算机访问脚本。确保使用您的IP地址（在命令行中运行ifconfig）和之前输入的端口。如果您正在使用防火墙，则可能需要配置防火墙。

控制台将向您显示HTTP响应和连接到服务器的任何设备的IP地址：

Python Server Access Details

注意endpoint/df是如何返回404错误的吗？端点未设置！如果您希望通过internet访问，请查看端口转发。

模板

现在您的服务器已经全部安装完毕，是时候编写一些模板了。您将使用JSON在Python和Javascript之间发送数据，而模板则促进了这一点。我们已经写过JSON在过去是什么，所以如果你不确定的话就去读一下。

您需要使用模板语言。Jinja2带有烧瓶，因此不需要额外的设置。

模板语言与web服务器配合使用。它接受Python脚本（后端代码）的输出，并使用HTML（前端代码）方便地输出给用户。需要注意的是，模板不应该用于逻辑！保持Python中的逻辑，并且只使用模板来显示数据。如果你开始尝试复杂化模板，它会变得非常混乱。

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

创建一个名为索引.html. 在其中，放置以下代码：

这是访问一段名为name的数据的方法，可以在脚本中找到它。回到你的json_输入输出. 脚本，并修改输出函数。输入以下代码，而不是返回hello world：

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

这将加载索引.html文件，并用{name}}模板标记替换字符串Joe。可以使用此方法加载模板文件夹中的任何页面，并向其传递任意数量的数据。

代码

既然您知道了模板的工作原理，下面是您需要的完整HTML代码。把这个贴在你的口袋里索引.html文件：

请注意，这不包括CSS或任何HTML标题。这些是网页所必需的（这个例子没有它们也能用），所以如果你愿意的话，可以在W3Schools上查看这些。

Python JSON HTML Button

这个文件里没有太多内容。已设置拉力赛车的JSON列表。有一段文字和一个按钮。当按下按钮时，jQuery用于将汽车列表发布到服务器。这将转到下一个要创建的接收方端点。如果您想进一步了解jQuery在这种情况下的工作原理，请务必阅读我们的jQuery指南。

以下是json所需的代码_输入输出:

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

这段代码定义了两个端点。默认的（/）服务于上一个html页面。当按下按钮时，向/receiver端点发出POST请求。路由定义的第二部分（methods=['POST']）定义了如何访问此页。由于POST是唯一指定的方式，因此此路由将拒绝任何其他http请求（如GET）。

这个/receiver端点只是在每个JSON行上循环，并将car make附加到一个字符串，然后在循环之后返回。JSON存储在数据变量中，并作为request.get\u json（），Python知道这是一个JSON对象。for循环中的item变量可以看作是一行数据。每行的不同元素可以通过使用方括号中的名称（item['make']）来访问。

打开浏览器开发人员工具（Mac OS/Chrome上的CMD&gt；ALT&gt；I），然后导航到“网络”选项卡。按下按钮，您将看到出现服务器响应：

Python JSON Resp***e

尝试修改初始JSON，看看会发生什么。让我们修改Python来做一些不同的事情，具体取决于JSON。下面是for循环所需的新代码：

for item in data:# loop over every rowmake = str(item['make'])if(make == 'Porsche'):result += make + ' -- That is a good manufacturer'else:result += make + ' -- That is only an average manufacturer'

它使用一个简单的if语句来更改输出，具体取决于输入。您可以很容易地将其修改为写入数据库，或运行不同的代码段。下面是它现在的样子：

Python JSON Conditional