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

Question

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

28

我正在使用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:

->

Python:

def getDictList(args):
    return dictlistMadeFromArgs

- Sneaky Beaver

你看过 AJAX 吗？ - Daniel

1

我没有任何关于AJAX的经验，甚至不知道它是什么。直到一周前，我所使用的唯一语言是Python，现在我也了解一些JS。 - Sneaky Beaver

1

但根据您的描述，AJAX正是您所需要的。 - Daniel

3个回答

5

.html

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

JavaScript

    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')
    ...

- Ayse

1

我是一名编程新手，但你可以尝试以下方法：
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

- Yanky

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alper Turan · Accepted Answer

要在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_data 可能是一个 JSON 字典或简单值。

如果你选择了 JSON，请确保在 Python 中将其转换为字典：

json.loads(jsdata)[0]

Eg.

GET:

@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编码字典时，您会得到一个列表，其中包含单个字典，存储在索引0处，因此您的JSON解码数据如下所示：

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

因为我们只需要字典，而不是列表，所以我们要获取存储在索引0处的项，也就是字典。

此外，import json。