如何利用Flask的Bootstrap Ti Ta Toggle Checkbox

问题描述 投票:-1回答:1

这里有Python / Flask / Bootstrap noob。我正在尝试构建一个web-app来控制扬声器选择器。我正在使用bootstrap和Ti-Ta Toggles来美化应用程序,但基本上它包含4-5个复选框/切换。这就是我的HTML现在的样子:

<form name="input" action="/" method="post">
                  <div class="row">
                    <div class="col-md-6">
                      <table class="table">
                        <tbody>
                          <tr>
                            <td>Living Room</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-00" type="checkbox" onclick="this.form.submit()" checked><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Kitchen</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-01" type="checkbox" onclick="this.form.submit()"><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Dining Room</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-02" type="checkbox" onclick="this.form.submit()"><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Unconnected</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-03" type="checkbox" onclick="this.form.submit()" disabled><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Protection</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-warning">
                                    <label>
                                        <input name="protection" type="checkbox" onclick="this.form.submit()"><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>

                          </tbody>
                      </table>
                    </div>

所以,我想弄清楚的是如何从我的Python / Flask应用程序中的复选框输入处理POST数据。我试图做一个简单的测试,如下所示:

from flask import Flask, request, render_template
import time

app = Flask(__name__)

@app.route('/', methods=['POST','GET'])
def change():
    if request.method == 'POST':
        spkr_00_state = request.args['spkrs-00']
        spkr_01_state = request.args['spkrs-01']
        spkr_02_state = request.args['spkrs-02']
        protection_state = request.args['protection']
        speaker_states = [spkrs_00_state, spkrs_01_state, spkrs_02_state, protection_state]
        return render_template('index.html', speaker_states=speakers_states)
    else:
        return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=80)

但是,我得到了错误的请求消息等等。所以,我对这应该如何工作有点迷茫。我应该为每个切换创建单独的表单吗?我应该在request.args周围加上“try”if语句吗?

python twitter-bootstrap checkbox flask
1个回答
1
投票

好的,以防万一其他人偶然发现这篇文章并且很好奇,我能够弄明白我的问题是什么。主要是,我的问题是默认情况下复选框只有在选中时才会POST。因此,如果您没有检查特定的盒子(在这种情况下它是我在引导程序Ti-Ta Toggles中使用的切换开关),那么在检查时将没有POST信息。

在Flask / Python中,当您尝试为特定复选框/切换请求发布数据时,如果它不存在,那么您将收到错误的请求错误。例如,如果POST后复选框spkrs_02,则以下内容可能会生成错误。

spkr_state[1] = request.form['spkrs_02']

解决这个问题的方法是在复选框的输入标记之后使用隐藏的输入标记。即使没有选中/切换输入标记,这也会在post中返回一个值。

例如,如果您使用以下方法设置复选框(切换),它将看起来像这样(在您的HTML文件中):

<input name="spkrs_02" type="checkbox" onclick="this.form.submit()"><span>Kitchen</span>
<input name="spkrs_02" type="hidden" value="off">

如上所述,当未检查“框”时,最后一行将在帖子中提供一些反馈。

还有一个注意事项,我使用了onclick =“this.form.submit()”,它有助于在单击时立即对切换/复选框执行操作。我会说实话,我不确定这是否是处理这个问题的正确方法,但它对我来说效果很好。

无论如何,祝你好运!

© www.soinside.com 2019 - 2024. All rights reserved.