【发布时间】:2019-05-31 06:02:42
【问题描述】:
我是 Flask 的新手,想在我的网站上创建多个(大约 4 个按钮)开/关切换按钮。我想知道这是否以及如何包括动态标签。
index.html
<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>
<body>
<input type="checkbox" class='toggle' checked data-toggle="toggle">
<div class='status'>Toggled</div>
<input type="checkbox" class="toggle1" checked data-toggle="toggle1">
<div class="status1">Toggled2</div>
</body>
<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) {
}
});
});
});
$(document).ready(function() {
$('.toggle1').click(function() {
var current_status1 = $('.status1').text();
$.ajax({
url: "/get_toggled_status1",
type: "get",
data: {status: current_status1},
success: function(response) {
$(".status1").html(response);
},
error: function(xhr) {
}
});
});
});
</script>
</html>
app.py(用于路由)
from flask import Flask, render_template, Response, request, redirect, url_for
app = Flask(__name__)
@app.route("/")
def index():
return render_template('index.html')
@app.route('/switch_led', methods=['POST'])
def move_forward():
if request.form['demo1']=='ON':
table.put_item(
Item={
'ID':'APPLIANCE1',
'sequence':1
}
)
ar="PRESS TO UPDATE"
templateData ={
'ar':ar
}
if request.form['demo1']=='OFF':
table.put_item(
Item={
'ID':'APPLIANCE1',
'sequence':0
}
)
ar="CHECK DATABASE"
templateData ={
'ar':ar
}
if request.form['demo2']=='ON':
table.put_item(
Item={
'ID':'APPLIANCE2',
'sequence':1
}
)
ar="PRESS TO UPDATE"
templateData ={
'ar':ar
}
if request.form['demo2']=='OFF':
table.put_item(
Item={
'ID':'APPLIANCE2',
'sequence':0
}
)
ar="CHECK DATABASE"
templateData ={
'ar':ar
}
if request.form['demo3']=='ON':
table.put_item(
Item={
'ID':'APPLIANCE3',
'sequence':1
}
)
ar="PRESS TO UPDATE"
templateData ={
'ar':ar
}
if request.form['demo3']=='OFF':
table.put_item(
Item={
'ID':'APPLIANCE3',
'sequence':0
}
)
ar="CHECK DATABASE"
templateData ={
'ar':ar
}
if request.form['demo4']=='ON':
table.put_item(
Item={
'ID':'LOCK',
'sequence':1
}
)
ar="PRESS TO UPDATE"
templateData ={
'ar':ar
}
if request.form['demo4']=='OFF':
table.put_item(
Item={
'ID':'LOCK',
'sequence':0
}
)
ar="CHECK DATABASE"
templateData ={
'ar':ar
}
return render_template('index.html', **templateData);
@app.route('/get_toggled_status')
def get_toggled_status():
current_status = request.args.get('status')
return 'Toggled' if current_status == 'Untoggled' else 'Untoggled'
@app.route('/get_toggled_status1')
def get_toggled_status1():
current_status1 = request.args.get('status1')
return 'Toggled' if current_status1 == 'Untoggled' else 'Untoggled'
if __name__ == '__main__':
app.run(debug='true')
我的结果是它显示了 2 个名为 toggle 和 toggle1 的切换按钮。但是单击名为切换的按钮...它在打开时将输出显示为切换,在关闭时显示为取消切换。到目前为止,一切都很好。但是当我点击名为 toggled1 的第二个按钮时,它会在第一个切换按钮而不是第二个按钮上执行操作。
【问题讨论】:
标签: python