如何使用Flask将数据从JS发送到Python？

Question

我正在使用Flask创建一个网站，并且希望能够使用页面中的数据执行python代码。我知道我可以简单地使用表单，但是它是一个页面，它在接收用户输入时会不断更新，并且每次发生任何事情时都要重新加载页面，这是一个很大的麻烦。我知道我可以{{ function() }}在javascript内执行操作，但是如何{{ function(args) }}使用js变量在javascript内执行操作？到目前为止，我唯一能想到的就是用js更新外部数据库（如MongoDB），然后使用Python进行读取，但是此过程会大大降低网站速度。

jQuery需要从Python函数中获取字典对象的列表，然后可以在html中使用它。因此，我需要能够执行以下操作：

JS：

var dictlist = { getDictList(args) };
dictlist.each(function() {
    $("<.Class>").text($(this)['Value']).appendTo("#element");
});

python：

def getDictList(args):
    return dictlistMadeFromArgs

Answer 1

要使用Flask将数据从Javascript获取到Python，您可以使用数据发出AJAX
POST
请求或AJAX
GET
请求。

Flask有六个可用的HTTP方法，我们只需要GET和POST。两者都将jsdata作为参数，但是以不同的方式获取它。这就是在两种不同环境（例如Python和Javascript）中交换两种完全不同的语言的方式。

首先，在Flask中实例化GET路线：

@app.route('/getmethod/<jsdata>')
def get_javascript_data(jsdata):
    return jsdata

或POST之一：

@app.route('/postmethod', methods = ['POST'])
def get_post_javascript_data():
    jsdata = request.form['javascript_data']
    return jsdata

第一种是通过访问/getmethod/<javascript_data>与AJAX
GET
如下：

$.get( "/getmethod/<javascript_data>" );

通过使用AJAX POST请求的第二个：

$.post( "/postmethod", {
    javascript_data: data 
});

javascript_dataJSON dict或简单值在哪里。

如果您选择JSON，请确保将其转换为Python中的字典：

json.loads(jsdata)[0]

例如。

得到：

@app.route('/getmethod/<jsdata>')
def get_javascript_data(jsdata):
    return json.loads(jsdata)[0]

开机自检：

@app.route('/postmethod', methods = ['POST'])
def get_post_javascript_data():
    jsdata = request.form['javascript_data']
    return json.loads(jsdata)[0]

如果您需要反过来做，将Python数据压入Javascript，则创建一个简单的GET路由，不带返回JSON编码的dict的参数：

@app.route('/getpythondata')
def get_python_data():
    return json.dumps(pythondata)

从JQuery检索并解码：

$.get("/getpythondata", function(data) {
    console.log($.parseJSON(data))
})

该[0]中json.loads(jsdata)[0]有没有因为当你解码Python中的JSON编码字典，你得到的单字典里面，存储在索引0，所以你的JSON解码后的数据看起来像这样的列表：

[{'foo':'bar','baz':'jazz'}] #[0: {'foo':'bar','baz':'jazz'}]

由于我们需要的只是字典中的字典而不是列表，因此我们将存储在索引为0的项目作为字典。

另外，import json。