Flask button post method - animation button icon - no change on url shown

Users
#1

Hi all I’m creating a python application for my raspberry. I would like push a button and with the html page send to python code with flask library the request and on the webpage, have the animation of the button which turn on and after few second turn off. Until now I have this simple code:

import RPi.GPIO as GPIO
from flask import (
    Flask,
    g,
    redirect,
    render_template,
    request,
    session,
    url_for
)
import time


GPIO.setmode(GPIO.BCM)

pins = {
    23 : {'name' : 'Cancello Carrale', 'state' : GPIO.LOW, 'type': 'Button'},
    24 : {'name' : 'Cancello Pedonale', 'state' : GPIO.LOW,'type': 'Button'}
    }

for pin in pins:
    GPIO.setup(pin, GPIO.OUT)
    GPIO.output(pin, GPIO.LOW)

app = Flask(__name__)
app.secret_key = 'somesecretkeythatonlyishouldknow'

@app.route('/')
def main():
    for pin in pins:
       pins[pin]['state'] = GPIO.input(pin)
    templateData = {
       'pins' : pins
    }

    return render_template('main.html', **templateData)
   
@app.route("/<changePin>/<action>")
def action(changePin, action):
    changePin = int(changePin)
    deviceName = pins[changePin]['name']
    if action == "on":
       GPIO.output(changePin, GPIO.HIGH)
    if action == "off":
       GPIO.output(changePin, GPIO.LOW)
    for pin in pins:
       pins[pin]['state'] = GPIO.input(pin)
    templateData = {
       'pins' : pins
    }

    return render_template('main.html', **templateData)

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=6969, debug=True)

and html:

<!DOCTYPE html>
<head>
   <title>TEST</title>
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
   <!-- Optional theme -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
   <!-- Latest compiled and minified JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</script>
</head>
</head>

<body>
   <h1>TEST</h1>
   {% for pin in pins %}
   <h2>{{ pins[pin].name }}
   {% if pins[pin].state == true %}
      is currently <strong>on</strong></h2><div class="row"><div class="col-md-2">
      <a href="/{{pin}}/off" class="btn btn-block btn-lg btn-default" role="button">Turn off</a></div></div>
   {% else %}
      is currently <strong>off</strong></h2><div class="row"><div class="col-md-2">
      <a href="/{{pin}}/on" class="btn btn-block btn-lg btn-primary" role="button">Turn on</a></div></div>
   {% endif %}
   {% endfor %}
</body>
</html>

I would like that url not change in //[on/off] but remain the main page url

thank you very much