如何使用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");
});

蟒蛇:

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字典或简单值在哪里.

如果您选择JSON,请确保将其转换为Python中的dict:

json.loads(jsdata)[0]

例如.

得到:

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

POST:

@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'}]

因为我们需要的只是内部的dict而不是列表,我们得到的项目存储在索引0这是dict.

还有import json.

Answer 2

.html

... id="clickMe" onclick="doFunction();">

.js

    function doFunction()
    {
        const name = document.getElementById("name_").innerHTML

        $.ajax({
            url: '{{ url_for('view.path') }}',
            type: 'POST',
            data: {
                name: name
            },
            success: function (response) {
            },
            error: function (response) {
            }
        });

    };

.py

@app.route("path", methods=['GET', 'POST'])
def view():
    name = request.form.get('name')
    ...