web-dev-qa-db-ja.com

Flask-呼び出しpythonボタンOnClickイベントの関数

pythonとFlaskは初めてです。ボタン付きのFlask Webアプリがあります。ボタンをクリックすると、JavaScriptメソッドではなくpythonメソッドを実行したいと思います。これどうやってするの？

pythonの例を見て、このようなフォームタグを使用して新しいページにリダイレクトする

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

しかし、新しいページにリダイレクトしたくありません。 pythonメソッドを実行するだけです。 私はRaspberry Piロボットカー用にこれを作成しています。進むボタンを押すと、ホイールを前に回すメソッドが実行されます。

ボタンのHTMLコード（index.html）

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

シンプルなapp.pyコード-move_forward（）メソッドはここにあります

#### 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関数を呼び出す

-- Flask Button run Python without refreshing page？

javascriptpythonhtmlflaskraspberry-pi
40
Amaanite

AJAXの助けを借りてこれを簡単に行うことができます...ページをリダイレクトまたは更新せずにHelloを出力するpython関数を呼び出す例を次に示します。

App.pyで、コードセグメントの下に配置します。

#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ページは次のようになります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
        $(function() {
          $('a#test').bind('click', function() {
            $.getJSON('/background_process_test',
                function(data) {
              //do nothing
            });
            return false;
          });
        });
</script>


//button
<div class='container'>
    <h3>Test</h3>
        <form>
            <a href=# id=test><button class='btn btn-default'>Test</button></a>
        </form>

</div>

ここで、コンソールの[Test simple]ボタンを押すと、更新せずに "Hello"が表示されていることがわかります。

25
Gihan Gamage

このWebアプリケーションをロボットのリモートコントロールとして使用したいようですが、主な問題は、アクションを実行するたびにページをリロードしたくないことです。この場合、最後に投稿したリンクが応答します問題。

Flaskについて誤解されているかもしれません。まず、1つのルートに複数の関数をネストすることはできません。特定のルートで一連の関数を使用可能にするのではなく、そのルートが呼び出されたときにサーバーが実行する特定の処理を1つ定義します。

これを念頭に置いて、app.pyを次のように変更することで、ページの再読み込みで問題を解決できます。

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でこれを使用します。

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

...前進するコードを実行します。そしてこれを含めてください：

{{ forward_message }}

...前進するメッセージをテンプレートに表示する場所。

これにより、ページがリロードされます。これは、AJAXおよびJavaScriptを使用しないと避けられません。

10
Logan Bertram

index.html（index.htmlはテンプレートフォルダにある必要があります）

<!doctype html>
<html>

<head>
    <title>The jQuery Example</title>

    <h2>jQuery-AJAX in FLASK. Execute function on button click</h2>  

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

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

</html>

test.py

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()
2
user2371563