Flask - Calling python function on button OnClick event

Question

I am new to python and Flask. I have a Flask Web App with a button. When I click on the button I would like to execute a python method not a Javascript method. How can I do this?

I have seen examples with python where it redirects me to a new page using a form tag like this

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

but I don't want it to redirect me to a new page. I just want it to execute the python method. I am making this for a Raspberry Pi robot car. When I press the forward button, I want it to run the method to Turn wheels forward.

Button HTML Code (index.html)

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

simple app.py Code - move_forward() method located here

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

I have seen similar questions to mine on Stackoverflow, but they don't seem to answer my question or I am unable to understand the answer. If someone could please provide me a simple way to call a Python method on button click event, it would be greatly appreciated.

Other Questions that I have looked at:

--Python Flask calling functions using buttons

--Calling a python function with a button

--Flask Button run Python without refreshing page?

Answer 1

You can simply do this with help of AJAX... Here is a example which calls a python function which prints hello without redirecting or refreshing the page.

In app.py put below code segment.

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

And your json.html page should look like below.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type=text/javascript>         $(function() {           $('a#test').on('click', function(e) {             e.preventDefault()             $.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> 

Here when you press the button Test simple in the console you can see "Hello" is displaying without any refreshing.