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

这是我的索引。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。

当前代码仅在我单击提交按钮时返回 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 在没有提交按钮的情况下获取复选框值

问题描述

2 个解决方案

解决方案1
0 2021-12-05 03:57:16

解决方案2
0 2021-12-05 04:23:16

`index.html` ：

`app.py` ：

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

问题描述

2 个解决方案

解决方案1 0 2021-12-05 03:57:16

解决方案2 0 2021-12-05 04:23:16

index.html ：

app.py ：

解决方案1
0 2021-12-05 03:57:16

解决方案2
0 2021-12-05 04:23:16

`index.html` ：

`app.py` ：