Flask Button run Python without refreshing page?

I would split it out into two routes to make it easier to see what you have to do:

LEFT, RIGHT, UP, DOWN, RESET = "left", "right", "up", "down", "reset"AVAILABLE_COMMANDS = {    'Left': LEFT,    'Right': RIGHT,    'Up': UP,    'Down': DOWN,    'Reset': RESET}@app.route('/')def execute():    return render_template('main.html', commands=AVAILABLE_COMMANDS)@app.route('/<cmd>')def command(cmd=None):    if cmd == RESET:       camera_command = "X"       response = "Resetting ..."    else:        camera_command = cmd[0].upper()        response = "Moving {}".format(cmd.capitalize())    # ser.write(camera_command)    return response, 200, {'Content-Type': 'text/plain'}

Then in your template you just need to use some JavaScript to send off the request:

{# in main.html #}{% for label, command in commands.items() %}    <button class="command command-{{ command }}" value="{{ command }}">        {{ label }}    </button>{% endfor %}{# and then elsewhere #}<script>// Only run what comes next *after* the page has loadedaddEventListener("DOMContentLoaded", function() {  // Grab all of the elements with a class of command  // (which all of the buttons we just created have)  var commandButtons = document.querySelectorAll(".command");  for (var i=0, l=commandButtons.length; i<l; i++) {    var button = commandButtons[i];    // For each button, listen for the "click" event    button.addEventListener("click", function(e) {      // When a click happens, stop the button      // from submitting our form (if we have one)      e.preventDefault();      var clickedButton = e.target;      var command = clickedButton.value;      // Now we need to send the data to our server      // without reloading the page - this is the domain of      // AJAX (Asynchronous JavaScript And XML)      // We will create a new request object      // and set up a handler for the response      var request = new XMLHttpRequest();      request.onload = function() {          // We could do more interesting things with the response          // or, we could ignore it entirely          alert(request.responseText);      };      // We point the request at the appropriate command      request.open("GET", "/" + command, true);      // and then we send it off      request.send();    });  }}, true);</script>

I've got the same problem, and the answer is simple using ajax XmlHttpRequest:

// send a request, but don't refresh pagexhttp = new XMLHttpRequest();xhttp.open("GET", "your script action", true);xhttp.send();

Here's a small example, calling current script with parameters "like", embedded in a function:

function likeStuffs(){    // send a request, but don't refresh page    xhttp = new XMLHttpRequest();    xhttp.open("GET", "?like", true);    xhttp.send();}

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').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>

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