关于javascript：Flask-在按钮OnClick事件上调用python函数


Flask - Calling python function on button OnClick event

我是python和Flask的新手。
我有一个带按钮的Flask Web App。当我单击按钮时，我想执行python方法而不是Javascript方法。我该怎么办？

我看过python的示例，它使用这样的表单标签将我重定向到新页面

1
<form action="/newPage" method="post">

但我不希望它将我重定向到新页面。我只希望它执行python方法。
我正在为Raspberry Pi机器人汽车制作这个。当我按下前进按钮时，我希望它运行"向前转动车轮"方法。

按钮HTML代码(index.html)

1
<button name="forwardBtn" onclick="move_forward()">Forward</button>

简单的app.py代码-位于此处的move_forward()方法

1
2
3
4
5
6
7
8
9
10
11
12
#### App.py code

from flask import Flask, render_template, Response, request, redirect, url_for
app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html');

def move_forward():
    #Moving forward code
    print("Moving Forward...")

我在Stackoverflow上看到了类似的问题，但是它们似乎无法回答我的问题，或者我无法理解答案。如果有人可以为我提供一种在按钮单击事件上调用Python方法的简单方法，将不胜感激。

我看过的其他问题：

-使用按钮的Python Flask调用函数

-使用按钮调用python函数

-烧瓶按钮运行Python而不刷新页面吗？

相关讨论

您可以在AJAX的帮助下简单地执行此操作...
这是一个示例，该示例调用一个python函数，该函数在不重定向或刷新页面的情况下打印问候。

在app.py中，置于代码段下方。

1
2
3
4
5
6
7
8
9
10
#rendering the HTML page which has the button
@app.route('/json')
def json():
    return render_template('json.html')

#background process happening without any refreshing
@app.route('/background_process_test')
def background_process_test():
    print ("Hello")
    return ("nothing")

您的json.html页面应如下所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
<script type=text/javascript>
        $(function() {
          $('a#test').on('click', function(e) {
            e.preventDefault()
            $.getJSON('/background_process_test',
                function(data) {
              //do nothing
            });
            return false;
          });
        });



//button

    Test
        <form>
            <button class='btn btn-default'>Test</button>
        </form>

在控制台中按下"简单测试"按钮时，您会看到"你好"
正在显示而没有任何刷新。

相关讨论

听起来您想将此Web应用程序用作机器人的遥控器，一个核心问题是您不希望每次执行操作都重新加载页面，在这种情况下，您最后一个链接是发布回答您的问题。

我认为您可能误解了Flask的某些方面。首先，您不能在一个路由中嵌套多个功能。您没有为特定的路由提供一组功能，而是定义了服务器在调用该路由时将执行的一项特定操作。

考虑到这一点，您可以通过更改app.py使其看起来更像这样来解决页面重新加载的问题：

1
2
3
4
5
6
7
8
9
10
11
12
from flask import Flask, render_template, Response, request, redirect, url_for
app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html')

@app.route("/forward/", methods=['POST'])
def move_forward():
    #Moving forward code
    forward_message ="Moving Forward..."
    return render_template('index.html', forward_message=forward_message);

然后在您的html中使用：

1
2
3
<form action="/forward/" method="post">
    <button name="forwardBtn" type="submit">Forward</button>
</form>

...执行前进代码。并包括以下内容：

1
{{ forward_message }}

...要在模板上显示前进消息的位置。

这将导致您的页面重新加载，这是不可避免的，而无需使用AJAX和Javascript。

相关讨论

index.html(index.html应该在模板文件夹中)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>

<head>
    The jQuery Example

    jQuery-AJAX in FLASK. Execute function on button click  

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    <script type=text/javascript> $(function() { $("#mybutton").click(function (event) { $.getJSON('/SomeFunction', { },
    function(data) { }); return false; }); });  
</head>

<body>        
        <input type ="button" id ="mybutton" value ="Click Here" />
</body>    

</html>

test.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
from flask import Flask, jsonify, render_template, request
app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')

@app.route('/SomeFunction')
def SomeFunction():
    print('In SomeFunction')
    return"Nothing"



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

最简单的解决方案

1
<button type="button" onclick="window.location.href='{{ url_for( 'move_forward') }}';">Forward</button>