【发布时间】：2019-11-25 18:03:31
【问题描述】：
我对 JavaScript、Python 和 Web 开发非常陌生，但我正在尝试创建一个网页，该网页在按下键时接收数据并将其发送到 python 后端进行处理。然后，Python 后端会将信息发送回 JavaScript 页面，JavaScript 页面将对其进行响应。这个过程需要连续发生，或者直到它被 Python 部分的某个响应终止。我已经编写了一个脚本来收集我在 Javascript 端需要的所有数据，并且我有一个 Python 应用程序来处理它（它需要进行一些编辑才能一次接收一个数组，但这不是问题） .目前，我的麻烦集中在让他们交流上。我正在使用 Flask，因为它处于开发的早期阶段，并且我已经阅读过它是一个简单高效的工具。
我开始尝试遵循有关如何启动和运行的教程，但没有取得太大的成功。我在网上找到的所有教程都以一个示例为中心，这让我对一般情况感到困惑。我在下面显示的代码是我必须从其中一个教程中使用的代码。我知道 render_template 打开了给定的文件（在本例中为 index.html）。我的第一个问题是：我会将 JavaScript 部分作为脚本放在该索引文件中吗？我读过通常应该将逻辑排除在模板之外，但我不确定我将如何运行此脚本 - 它应该在用户在网站上执行的操作下持续运行。其他一些教程表明，也许答案是使用多个 @app.route 语句，但我什至不确定 @app.route 到底在做什么。我知道它是一个装饰器，但是即使在基础研究之后，我也不清楚它的功能和改变它的目的。 @app.route 有什么作用？我遵循的另一个教程给了我如下所示的内容，但我对每个 @app.route 正在做什么有点困惑。我也不确定 request.get_json() 是什么。根据我的阅读，JSON 是一种通过属性描述数据的方式，而不是包括所有数据本身，但我不确定请求是做什么的（我知道它是从烧瓶中导入的）。
从这里开始，JavaScript 需要有一个 post 函数，对吧？我假设 Python 会“获取”JavaScript“发布”的内容，但第二个教程的代码似乎另有说明（因为通过 request.get_json() 请求数据的函数（我假设）也被列为方法 = ['邮政']）。我还假设我能够在前端运行“POST”请求，作为响应事件侦听器（在按键上）的函数的一部分。在 Python 获得 JavaScript 发布的内容后，Python 会发布响应，而 JavaScript 会得到响应并以实物形式响应。我假设这就是一切的运作方式。
最后，有人有关于 JavaScript 如何发布或获取请求的解释或资源吗？我有一些可以尝试的资源，但我还没有太多时间来充分探索它们。我已经在代码部分中包含了到目前为止我尝试过的内容。
总之，当我匆忙进入前端和后端开发的世界时，我感到有些不知所措。我觉得好像我理解了它背后的总体思想，但许多细节让我感到非常困惑。如果有什么我需要知道但我还不知道的事情，请告诉我——谢谢你的帮助，很抱歉这不是尽可能具体。
// Tutorial Python code
import os
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html", message = "Hello Flask!", contacts = ['c1', 'c2', 'c3', 'c4', 'c5']);
if __name__ == "__main__":
app.run()
// Corresponding Tutorial HTML
<!DOCTYPE html>
<html>
<head>
<title>Flask Template Example</title>
</head>
<body>
<div>
<p>{{ message }}</p>
<p>{{ contacts }}</p>
<p>My Contacts:</p>
<ul>
{% for contact in contacts %}
<li>{{ contact }}</li>
{% endfor %}
</ul>
</div>
</body>
</html>
// Second tutorial Python, two @app.route
import sys
from flask import Flask, render_template, request, redirect, Response
import random, json
app = Flask(__name__)
@app.route('/')
def output():
return render_template('index.html', name='Joe')
@app.route('/reciever', methods = ['POST'])
def worker():
data = request.get_json()
result = ''
for item in data:
result += str(item['make']) + '\n'
return result
if __name__ == "__main__":
app.run()
// JavaScript communication first attempt (I was sending them to the second tutorial's Python code)
var sentArray = {"array" : [key, start, finish, holdtime, ud, uu, dd, 1]};
$.post("reciever",sentArray,function(){
});
event.preventDefault();
// JavaScript communication second attempt
var sentArray = {"array" : [key, start, finish, holdtime, ud, uu, dd, 1]};
fetch('/typing', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
body:
{"array" : [key, start, finish, holdtime, ud, uu, dd, 1]}
}
});
event.preventDefault();
目前，我收到 500 错误，表明我没有正确处理某些事情。我不确定是什么，坦率地说，有数百种方法我可能会做错。感谢您的帮助！
【问题讨论】：
-
您能否包含您收到的错误信息？不过猜测一下，您可能需要将
for item in data:更改为for item in data["array"]: -
您可能还想将其分解为多个问题。有很多东西要解压。路由如何工作，如何拆分我的模板，我应该使用 JSON，如何从 Javascript 发出 API 请求等。
-
感谢@Tim 的回复！我按照 Avi Baruch 的建议转到了 Ajax，现在发布了一个更具体的问题。
标签： javascript python flask frontend backend