Estoy tratando de rastrear la cantidad de veces que se hace clic en un botón o en un menú desplegable en mi aplicación de matraz y enviarlo de vuelta al backend de Python para que pueda ingresar a la base de datos. Sigo obteniendo nulo por mi valor, parece que no puedo resolverlo.
nuevo.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form method = "POST"> <button type="button" id = "numberclicks" name = "numberclicks" onClick="onClick()">Click me</button> <p>Clicks: <a id="clicks" name ="clicks" placeholder = 0 >{{clicks|safe}}</a></p> <button type="submit">Login</button> </form> </div> <script> var clicks = 0; function onClick() { clicks += 1; document.getElementById("clicks").innerHTML = clicks; console.log(clicks) } </script> </body> </html>app.py
from flask import Flask,render_template,request import json app = Flask(__name__) # turn this into calss and import to record who is logged in to the session aka. user then take log data and make relationship to tables # HOW MANY TIMES USER VISITED THE VISIT PAGE!!! @app.route('/', methods=['POST', 'GET']) def signUpUser(): if request.method == "POST": click = request.args.get('clicks',type = int) return json.dumps({'status':'OK','click':click}) return render_template("new.html") if __name__ == "__main__": app.run(debug=True)Puede usar el objeto XMLHttpRequest para enviar el recuento de clics de forma asíncrona al backend del matraz.
const xhr = new XMLHttpRequest(); xhr.open("POST", "/", true); xhr.onload = () => { if (xhr.status === 200) { ...do whatever you want... } } const data = new FormData(); data.append("clicks", clicks); xhr.send(data);function onClick() { clicks += 1; document.getElementById("clicks").innerHTML = clicks; console.log(clicks); fetch("/", { headers: { Accept: "application/json", "Content-Type": "application/json", }, method: "POST", body: JSON.stringify({clicks}), }); }