Flask 在没有提交按钮的情况下获取复选框值

Question

我试图在没有提交的情况下获取 Flask 中复选框的值。

这是我的 app.py:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.form.get('c_check')=="0":
        print('success: 0')
        checked=''
    elif request.form.get('c_check')=="1":
        print('success: 1')
        checked='checked'
    return render_template('index.html')

这是我的 JavaScript 切换复选框：

function hello() {
    if (document.querySelector('input').value=='0') {    
        document.querySelector('input').value='1'
        console.log('value 1');
    }
    else {
        document.querySelector('input').value='0'
        console.log('value 0');
    }
}

这是我的 index.html:

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

    <div class="form-check form-switch">
        <input class="form-check-input btn-lg" 
        name="c_check" 
        value="0" 
        type="checkbox" 
        role="switch" 
        id="flexSwitchCheckChecked" 
        onclick="hello()"
        >
        
        <label class="form-check-label btn-lg" 
        for="flexSwitchCheckChecked"></label>
        <input type="submit">
    </div>
</form>

<script src="{{url_for('static', filename= 'js/hello.js')}}"></script>

我要

删除提交按钮
当我点击复选框时，Python 应该收到复选框值，0 或 1。

当前代码只有returns 1 当我点击提交按钮时。解决方案应该是我完全删除提交按钮并让 Python 监听值变化并实时打印。

我对 socketio 解决方案持开放态度，但我不知道该怎么做。

Answer 1

你只需要为此更改客户端即可；使用 AJAX。这是使用纯 JavaScript:

的最简单示例

function ajaxRequest() {
  const checked = document.getElementById("mycheckbox").checked;
  console.log("Sending data to the server that the checkbox is", checked);
  
  // Use the XMLHttpRequest API
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    console.log("Result sent to server!");
  }
  xhttp.open("POST", "/", true);
  xhttp.send();
}

<label for="mycheckbox">Check or uncheck this box:</label>
<input id="mycheckbox" type="checkbox" onchange="ajaxRequest()" />

显然该示例无法运行，因为没有服务器，但这是一个 AJAX 用户单击复选框后带有复选框的示例。

Answer 2

为此，您需要向输入添加一个侦听器。完全刷新的表单提交可能是糟糕的用户体验，因此我们将使用 JS 发送异步请求 POST 将数据发送到路由，然后从响应中读取数据。

这是一个概念验证演示，它一直使用 JSON，现在 AJAX 的标准：

`index.html`:

<body>
  <input type="checkbox" />
  <div class="result"></div>
  <script>
    document
      .querySelector("input")
      .addEventListener("click", e => {
        fetch("http://127.0.0.1:5000/", {
            method: "POST",
            headers: {
              "Accept": "application/json",
              "Content-Type": "application/json"
            },
            body: JSON.stringify({
              c_check: Number(e.target.checked)
            })
          })
          .then(res => {
            if (!res.ok) {
              throw Error(res.status);
            }

            return res.json();
          })
          .then(({data: {val}}) => {
            console.log(val);
            const res = document.querySelector(".result");
            res.innerText = `client got: ${val}`;
          })
          .catch(err => console.error(err))
        ;
      })
    ;
  </script>
</body>

`app.py`:

from flask import (
    Flask, jsonify, render_template, request
)

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":
        return render_template("index.html")

    val = request.json.get("c_check")
    print(val)
    return jsonify({"data": {"val": val}})
    
if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5000, debug=True)

Flask 在没有提交按钮的情况下获取复选框值

Flask get checkbox value without submit button

html

javascript

python

flask

`index.html`:

`app.py`: