使用 Flask 将 JavaScript 连接到 Python 脚本

Question

我完全靠 HTML/CSS 创建了一个网站。也使用 Javascript 事件（点击按钮，...）。

现在我想用它连接一个 python 脚本，更重要的是，return 来自 python 的结果到我的网站并在那里显示（使用）它们。考虑这样的事情：

带有输入和按钮的网站。如果你点击按钮，如果输入是奇数或偶数，python 脚本应该运行其中 returns （当然你不需要 python 对于这种特定情况，但我想这样做）

根据我的研究，我相信 Flask 是可以做到这一点的库 (?)，但我真的不知道该怎么做。我发现的例子很少。如果有人可以实现上面的例子或者告诉我具体怎么做，我将不胜感激。

我知道网上已经有一些关于这个概念的问题，但正如我所说，例子很少。

Answer 1

关于 Flask 是一个很好的解决方案，你是对的，到处都有示例和教程。如果你想要的只是运行按下按钮的特定功能并在javascript中得到一些东西，我在下面放了一个简单的例子。

# app.py
from flask import Flask, render_template
from flask import jsonify

app = Flask(__name__)

# Display your index page
@app.route("/")
def index():
    return render_template('index.html')

# A function to add two numbers
@app.route("/add")
def add():
    a = request.args.get('a')
    b = request.args.get('b')
    return jsonify({"result": a+b})

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=80)

这可以是运行和 python app.py 并确保您的 index.html 在同一目录中。然后您应该可以转到 http://127.0.0.1/ 并查看您的页面加载。

这实现了一个将两个数字相加的函数，这可以在您的 javascript 中通过调用 http://127.0.0.1/add?a=10&b=20 来调用。这应该 return {"result": 30}.

您可以使用下面的代码在您的 javascript 中获取此代码，并将此代码放置在您的按钮中点击回调。

let first = 10;
let second = 20;
fetch('http://127.0.0.1/add?a='+first+'&b='+second)
  .then((response) => {
    return response.json();
  })
  .then((myJson) => {
    console.log("When I add "+first+" and "+second+" I get: " + myJson.result);
  });

这应该是基本的基础知识，但是一旦您可以将数据提交到 Flask 并取回数据，您现在就有了运行 Python 中的东西的接口。

编辑：完整的前端示例

https://jsfiddle.net/4bv805L6/

Answer 2

非常感谢您的帮助和花费的时间。但是您的回答并没有以我需要的方式帮助我。那时我不知道该怎么做，但自从我前段时间想出来了（我看了一个 youtube 视频...）我想我在这里分享我的解决方案（粘两个字符串 ):

那就是 app.py:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/stick', methods=['GET', 'POST'])
def stick():
    if request.method == 'POST':
        result = request.form['string1'] + request.form['string2']
        return render_template('index.html', result=result)
    else:   
        return render_template('index.html')

if __name__ == "__main__":
    app.run()

还有 index.html（放在文件夹 templates 中）：

<!DOCTYPE html>
<html>
<body>
    <h3> Stick two strings </h3>
    <form action="{{ url_for('stick') }}" method="post">
            <input type="text" name="string1">
            <input type="text" name="string2">
            <input type="submit" value="Go!">
            <p id="result"></p>
    </form>
<script>

document.getElementById("result").innerHTML = "{{result}}"

</script>
</body>
</html>

在终端中输入 python app.py 它应该可以工作。

使用 Flask 将 JavaScript 连接到 Python 脚本

Connect JavaScript to Python script with Flask

javascript

python

web-frameworks

flask