如何使用Flask将JavaScript连接到Python脚本?

6

我使用 HTML/CSS 创建了一个网站。我还使用了 JavaScript 处理事件(例如点击按钮等)。

现在我想要连接一个 Python 脚本,并且更重要的是,将 Python 函数的结果返回到我的网站上并显示它们。

考虑这样一种情况:我有一个带有输入字段和按钮的网站。如果您点击按钮,则应该运行一个 Python 脚本,该脚本会返回输入是否为偶数或奇数(当然,在这个特定案例中您不需要 Python,但我想这么做)。

经过我的研究,我认为 Flask 库是用于此目的的库,但我真的不知道如何做。我找到了很少的示例。如果有人能够实现上述示例或告诉我如何确切地做到这一点,我会非常感激。

我知道已经有一些关于这个概念的问题在线上,但正如我所说的,样例非常少。


Flask 文档现在有一个完整的示例:https://flask.palletsprojects.com/en/2.2.x/patterns/javascript/ - Gino Mempin
2个回答

12

你说的 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/并查看页面加载。

这实现了一个函数,该函数将两个数字相加,可以通过调用http://127.0.0.1/add?a=10&b=20来调用您的javascript。然后应返回{"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/


1
非常感谢!不过你能不能对index.html文件更加精确一些呢? 我有点难以理解这些教程,因为它们不是很清晰。我需要一个完整的例子,而不需要添加任何内容就可以理解如何使用Flask。 谢谢! - LeoFr
1
看这里:https://jsfiddle.net/4bv805L6/ 这个可以在 Flask 没有运行的情况下进行演示,但是一旦 Flask 运行起来,请确保删除第 13-16 行,以便您能够真正看到 Flask 的响应。 - Michael Bauer
1
再次感谢您花费的时间!但是我现在更加困惑了,因为我在您的代码示例中没有看到任何Flask命令... - LeoFr
1
从这些文件的目录中运行“python app.py”将启动应用程序。希望这可以帮助到您。 - Michael Bauer
1
这太棒了。感谢您的编程专业知识。已点赞! - D Left Adjoint to U

5

非常感谢您花时间在这个答案上。但是那个答案没有按照我需要的方式帮助我。那时我不知道该怎么做,但后来我在一段时间内解决了它,我想我应该在这里分享我的解决方案:

这就是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,它就能正常运行。

1
请问您能否在 Github 仓库 或这里分享您的文件夹结构和代码?我也遇到了与您类似的问题,但无法解决。我的目标是从客户端运行 Python 脚本,我正在考虑使用 Flask 作为中间介质。除此之外,您写道在终端上输入 python stackpy.py,这正确吗?还是应该是 python app.py - user10634362
如果您想在客户端运行Python,则用户必须安装Python!如果您想在服务器端运行由客户端提交的随机代码,我认为这代表了设计上的问题。Python可以做任何事情,包括删除文件。而且我不是如何限制您的Flask服务器可以执行哪些操作的专家。 - D Left Adjoint to U

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接