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

【问题标题】：How do I send data from JS to Python with Flask?如何使用 Flask 将数据从 JS 发送到 Python？
【发布时间】：2015-07-11 07:29:15
【问题描述】：

我正在使用 Flask 创建一个网站，我希望能够使用页面中的数据执行 python 代码。我知道我可以简单地使用表单，但它是一个页面，当它接收用户输入时会不断更新，每次发生某些事情时让它重新加载页面会是一个巨大的痛苦。我知道我可以在 javascript 中执行 {{ function() }}，但是如何使用 js 变量在 javascript 中执行 {{ function(args) }}？到目前为止，我唯一能想到的就是用 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

【问题讨论】：

你看过 AJAX 吗？
我对 AJAX 没有任何经验，甚至不知道它是什么。直到一周前，我唯一用过的语言是 Python，现在我也知道了一些 JS。
但根据您的描述，AJAX 正是您所需要的。

标签： javascript jquery python flask

【解决方案1】：

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

Flask has six HTTP methods available，其中我们只需要 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_data 是 JSON 字典或简单值。

如果您选择 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 编码的字典：

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

从 JQuery 中检索并解码：

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

json.loads(jsdata)[0] 中的 [0] 之所以存在，是因为当您在 Python 中解码 JSON 编码的 dict 时，您会得到一个内部包含单个 dict 的列表，存储在索引 0 处，因此您的 JSON 解码数据如下所示：

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

由于我们需要的只是里面的字典而不是列表，所以我们得到存储在索引 0 的项目，即字典。

另外，import json。

【讨论】：

@SneakyBeaver 抱歉打错了，已修复。
因此，如果我采用 post 路线，我可以执行类似 var dictlist = $.post( "/postmethod", { javascript_data: data } );并让python返回一个dict，并能够将dictlist用作js内的dict对象的普通数组？（jsdata）之后的[0]还有什么作用？
反之亦然。如果 您需要 是将 Python 数据推送到 Javascript，您只需要一个不带参数的 GET 路由，该路由返回以 JSON 编码的字典 json.dumps(dictlist) 并在 JQuery 中检索它，例如 $.get( "/getmethod", function( data ){ console.log( data ) })。不过，如果您经常这样做，我建议您使用Long Polling 或Server Sent Events。
是的，我忘记了那一步。您必须使用 $.parseJSON(data) 对 JSON 进行解码才能将其用作 Javascript 对象，否则它将无法正常工作。
这很有帮助。谢谢！

【解决方案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')
    ...

【讨论】：

【解决方案3】：

我是编码新手，但你可以试试这个：
index.html

<script>
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("width").value = w;
document.getElementById("height").value = h;
</script>

<html>
  <head>
    <!---Your Head--->
  </head>
  <body>
    <form method = "POST" action = "/data">
      <input type = "text" id = "InputType" name = "Text">
      <input type = "hidden" id = "width" name = "Width">
      <input type = "hidden" id = "height" name = "Height">
      <input type = "button" onclick = "myFunction()">
    </form>
  </body>
</html>

.py

from flask import Flask, request
app = Flask(__name__)
html = open("index.html").read()
@app.route("/")
def hello():
    return html
@app.route("/data", methods=["POST", "GET"])
def data():
    if request.method == "GET":
        return "The URL /data is accessed directly. Try going to '/form' to submit form"
    if request.method == "POST":
        text = request.form["Text"]
        w = request.form["Width"]
        h = request.form["Height"]
        //process your code
    return //value of your code

【讨论】：