用Flask连接JavaScript和Python脚本

5 人关注

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

现在我想用它连接一个Python脚本，更重要的是，把Python的结果返回到我的网站，并在那里显示（使用）它们。考虑一下这样的事情。

网站有一个输入和按钮。如果你点击按钮，一个Python脚本应该运行，返回输入的数字是奇数还是偶数（当然你不需要Python来处理这个特殊情况，但我想这样做）。

根据我的研究，我相信Flask是一个可以做到这一点的库（？我找到的例子非常少。如果有人能实现上面的例子或者告诉我具体怎么做，我将非常感激。

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

javascript

python

flask

web-frameworks

LeoFr

发布于 2020-01-30

2 个回答

Michael Bauer

发布于 2020-02-12

已采纳

0 人赞同

你说的没错，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. This should then 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/


           
            
             非常感谢!然而，你能不能对index.html文件说得更精确一些？  我很难理解教程的内容，因为它们不是很清楚。我需要一个完整的例子，我不需要添加任何东西就能理解flask的工作。谢谢你！"。


           
            
             Michael Bauer
            
            ：


           
            
             请看这里。
             
              jsfiddle.net/4bv805L6
             
             在flask没有运行的时候，这个方法会起作用，但是一旦flask运行了，请确保你删除第13-16行，这样你就能真正看到flask的响应。


           
            
             再次感谢您所花费的时间!但我现在更困惑了，因为我在你的代码示例中没有看到任何flask命令......


           
            
             Michael Bauer
            
            ：


           
            
             从这些文件的目录中运行 "python app.py "将启动该应用程序。希望这有帮助。


           
            
             ObjectsMorphisms
            
            ：


           
            
             这真是太棒了。  谢谢你的编码专长。  我支持你


          
           
            我真的很感谢你的帮助和花费的时间。但你的回答并没有帮助我，我需要它。在这一点上，我不知道该怎么做，但由于我前段时间想通了（我看了一个YouTube视频......），我想我在这里分享我的解决方案(
            
             stick two strings
            
            ):
           
           
            那是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（放在文件夹中的模板):
<!DOCTYPE html>
    <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}}"