web-dev-qa-db-fra.com

Flask - Appel python sur le bouton OnClick event

Je suis nouveau sur python et Flask. J'ai une application Web Flask avec un bouton. Lorsque je clique sur le bouton, je voudrais exécuter une méthode python et non une méthode Javascript. Comment puis-je faire ceci?

J'ai vu des exemples avec python où il me redirige vers une nouvelle page en utilisant une balise de formulaire comme celle-ci

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

mais je ne veux pas qu'il me redirige vers une nouvelle page. Je veux juste qu'il exécute la méthode python. Je fais cela pour une voiture robot Raspberry Pi . Lorsque j'appuie sur le bouton avant, je veux qu'il exécute la méthode pour tourner les roues vers l'avant.

Code HTML du bouton ( index.html )

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

code app.py simple - méthode move_forward () située ici

#### 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...")

J'ai vu des questions similaires aux miennes sur Stackoverflow, mais elles ne semblent pas répondre à ma question ou je n'arrive pas à comprendre la réponse. Si quelqu'un pouvait me fournir un moyen simple d'appeler une méthode Python lors d'un événement de clic de bouton, ce serait grandement apprécié.

Autres questions que j'ai examinées:

-- Python Flask appelant des fonctions à l'aide de boutons

-- Appel d'une fonction python avec un bouton

-- Flask Button run Python sans actualisation de la page?

javascriptpythonhtmlflaskraspberry-pi
40
Amaanite

Vous pouvez simplement le faire avec l'aide d'AJAX ... Voici un exemple qui appelle une fonction python qui imprime bonjour sans rediriger ou rafraîchir la page.

Dans app.py, mettez sous le segment de code.

#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")

Et votre page json.html devrait ressembler à ci-dessous.

<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>

Ici, lorsque vous appuyez sur le bouton Test simple dans la console, vous pouvez voir "Bonjour" s'affiche sans aucune actualisation.

25
Gihan Gamage

Il semble que vous souhaitiez utiliser cette application Web comme télécommande pour votre robot, et un problème majeur est que vous ne voudrez pas qu'une page soit rechargée à chaque fois que vous effectuez une action, auquel cas le dernier lien que vous avez publié répond à votre problème.

Je pense que vous avez peut-être mal compris certaines choses à propos de Flask. D'une part, vous ne pouvez pas imbriquer plusieurs fonctions dans un même itinéraire. Vous ne rendez pas un ensemble de fonctions disponibles pour une route particulière, vous définissez la seule chose que le serveur fera lorsque cette route sera appelée.

Dans cet esprit, vous pourriez résoudre votre problème avec un rechargement de page en modifiant votre app.py pour ressembler à ceci:

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);

Ensuite, dans votre html, utilisez ceci:

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

... Pour exécuter votre code aller de l'avant. Et incluez ceci:

{{ forward_message }}

... où vous souhaitez que le message suivant apparaisse sur votre modèle.

Cela entraînera le rechargement de votre page, ce qui est inévitable sans utiliser AJAX et Javascript.

10
Logan Bertram

index.html (index.html doit se trouver dans le dossier des modèles)

<!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