統計 JS 前端的 html 按鈕點擊次數並將其發送到 flask 后端

Question

我正在嘗試跟蹤在我的 flask 應用程序中單擊按鈕或下拉菜單的次數並將其發送回 python 后端，以便我可以輸入數據庫。 我不斷得到 null 的價值，我似乎無法弄清楚。

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

應用程序.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)

Answer 1

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

Answer 2

您可以使用 XMLHttpRequest object 將點擊次數異步發送到 flask 后端。

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

統計 JS 前端的 html 按鈕點擊次數並將其發送到 flask 后端

問題描述

2 個解決方案

解決方案1
0 2022-01-08 19:57:03

解決方案2
0 2022-01-08 20:55:26

統計 JS 前端的 html 按鈕點擊次數並將其發送到 flask 后端

問題描述

2 個解決方案

解決方案1 0 2022-01-08 19:57:03

解決方案2 0 2022-01-08 20:55:26

解決方案1
0 2022-01-08 19:57:03

解決方案2
0 2022-01-08 20:55:26