如何在 Flask 中使用 Bootstrap Ti Ta Toggle Checkbox

Question

Python/Flask/Bootstrap 新手在这里。我正在尝试构建一个网络应用程序来控制扬声器选择器。我正在使用引导程序和 Ti-Ta 切换来美化应用程序，但基本上它由 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 语句吗？

Answer 1

好的，以防其他人后来偶然发现这篇文章并且很好奇，我能够弄清楚我的问题是什么。主要是，我的问题是默认情况下复选框只会在选中时发布。因此，如果您没有选中某个特定的框（在这种情况下，它是我在引导 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()" 这有助于在单击切换/复选框时立即对其进行操作。老实说，我不确定这是否是处理此问题的正确方法，但它对我来说效果很好。

无论如何，祝你好运！