Flask-具有动态标签的切换按钮
uit*_*400 5 python jinja2 flask flask-wtforms
我是Flask的新手，并且想在我的网站上创建一个On / Off切换按钮。我想知道是否以及如何可以包括动态标签。下图显示了我的想法：
我当时在考虑使用a，wtfforms SubmitField但我不太了解如何在我的route.py文件和html模板之间实现这种动态行为。我在想这样的事情：
forms.py：
from flask_wtf import FlaskForm
from wtforms import SubmitField
class PowerSwitchForm(FlaskForm):
power_switch = SubmitField("ON")
route.py：
from flask import render_template, flash, redirect, url_for
from app import app
from app.forms import PowerSwitchForm
@app.route('/power', methods=['GET', 'POST'])
def power():
power_switch = PowerSwitchForm()
if power_switch.power_switch.label.text == "ON" and power_switch.validate():
flash("Power has been turned ON")
power_switch.power_switch.label.text = "OFF"
return redirect(url_for('power')
elif power_switch.power_switch.label.text == "OFF" and power_switch.validate():
flash("Power has been turned OFF")
power_switch.power_switch.label.text = "ON"
return redirect(url_for('power')
return render_template('power.html', form0=power_switch)
power.html：
<!DOCTYPE html>
{% extends "base.html" %}
{% block content %}
<h2>Power switch</h2>
<form action="" method="post" novalidate>
{{ form0.hidden_tag() }}
{{ form0.power_switch() }}
</form>
{% endblock %}
jquery单击切换按钮时，您可以使用它来处理所需的操作。此外，如果切换按钮时应执行后端处理，ajax则可以使用。这个答案证明了两者。bootstrap-toggle是一个可以简单实现切换的库。要使用，请复制以下header标签值：
显示“toggled”或“untoggled”的简单切换：
<html>
<body>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<input type="checkbox" class='toggle' checked data-toggle="toggle">
<div class='status'>Toggled</div>
</body>
<script>
$(document).ready(function() {
$('.toggle').click(function() {
var current_status = $('.status').text();
if (current_status === 'Untoggled'){
$('.status').html('Toggled');
}
else{
$('.status').html('Untoggled');
}
});
});
</script>
</html>
为“已切换”或“未切换”触发后端脚本的切换：
在模板中，稍微更改script：
<script>
$(document).ready(function() {
$('.toggle').click(function() {
var current_status = $('.status').text();
$.ajax({
url: "/get_toggled_status",
type: "get",
data: {status: current_status},
success: function(response) {
$(".status").html(response);
},
error: function(xhr) {
//Do Something to handle error
}
});
});
});
</script>
然后，在您的应用程序中，创建一个路由/get_toggled_status：
@app.route('/get_toggled_status')
def toggled_status():
current_status = flask.request.args.get('status')
return 'Toggled' if current_status == 'Untoggled' else 'Untoggled'
此示例与纯html/jquery解决方案执行相同的操作，但是，它确实演示了在使用切换时如何与后端通信。