Flask 在没有提交按钮的情况下获取复选框值
[英]Flask get checkbox value without submit button
问题描述
I'm trying to get value of checkbox in Flask without a submit.
我试图在没有提交的情况下获取 Flask 中复选框的值。
Here is my app.py:这是我的 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')
Here is my JavaScript that toggles the checkbox:这是我的 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');
}
}
And here is my index.html:这是我的索引。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>
I want to我想要
- Remove the submit button移除提交按钮
- When I click on the checkbox, Python should receive the checkbox value, 0 or 1.当我点击复选框时，Python 应该收到复选框值，0 或 1。
The present code only returns 1 when I click the submit button.当前代码仅在我单击提交按钮时返回 1。 The solution should be that I remove the submit button entirely and have Python listen on the value change and print that in real time.解决方案应该是我完全删除提交按钮并让 Python 监听值变化并实时打印。
I'm open to socketio solution, but I don't know how to do it.我对socketio解决方案持开放态度，但我不知道该怎么做。
2 个解决方案
解决方案1
0 2021-12-05 03:57:16
You only need to change the client-side for this;您只需要为此更改客户端； use AJAX.使用 AJAX。 Here's the simplest example using pure JavaScript:这是使用纯 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()" />
Obviously the example won't work because there is no server, but this is an example of AJAX with a checkbox once a user clicks a checkbox.显然，该示例不起作用，因为没有服务器，但这是 AJAX 的示例，一旦用户单击复选框，就会出现复选框。
解决方案2
0 2021-12-05 04:23:16
To do this, you'll want to add a listener to the input.为此，您需要向输入添加一个侦听器。 A form submission with a full refresh would probably be poor UX, so we'll send an asynchronous request with JS to POST the data to the route, then read data from the response.完全刷新的表单提交可能会导致用户体验不佳，因此我们将使用 JS 发送异步请求以将数据 POST 到路由，然后从响应中读取数据。
Here's a proof-of-concept demo that uses JSON all the way through, the standard for AJAX nowadays:这是一个概念验证演示，它一直使用 JSON，现在是 AJAX 的标准：
index.html : 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 : 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)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.