0

我有这个包含几个“按钮”的 Flask 应用程序。我希望能够对具有不同功能的每个按钮做出反应。当前的 HTML（见下文）使用带有图像类型的输入，以便在单击任何图像时进行发布操作。

<!doctype html>
<html>
<head>
    <meta http-equiv="refresh" content="60"/>
    <title>Home page</title>
</head>
<body>
    <div>
        <h1 class="title">Automation-Rack Power Controller</h1>
    </div>
    <form method="post">
        <table align="center">
            <tr>
                <td>
                    <div>
                        {% if led_status[0] == '1' %}
                            <img class="led" id="PS1_LED" src="/static/Red_10x10.png" width="10" height="10">
                        {% else %}
                            <img class="led" id="PS1_LED" src="/static/Grey_10x10.png" width="10" height="10">
                        {% endif %}
                        <input title="Power Socket 1" name="PS1" type="image" src="/static/TypeH_BlueUpSideDown.png" width="110" height="112">
                    </div>
                </td>
                <td>
                    <div>
                        {% if led_status[2] == '1' %}
                            <img class="led" id="PS3_LED" src="/static/Red_10x10.png" width="10" height="10">
                        {% else %}
                            <img class="led" id="PS3_LED" src="/static/Grey_10x10.png" width="10" height="10">
                        {% endif %}
                        <input title="Power Socket 3" name="PS3" type="image" src="/static/TypeH_BlueUpSideDown.png" width="110" height="112">
                    </div>
                </td>
                <td>
                    <div>
                        {% if led_status[4] == '1' %}
                            <img class="led" id="PS5_LED" src="/static/Red_10x10.png" width="10" height="10">
                        {% else %}
                            <img class="led" id="PS5_LED" src="/static/Grey_10x10.png" width="10" height="10">
                        {% endif %}
                       <input title="Power Socket 5" name="PS5" type="image" src="/static/TypeH_BlueUpSideDown.png" width="110" height="112">
                    </div>
                </td>
                <td>
                    <div>
                        {% if led_status[6] == '1' %}
                            <img class="led" id="PS7_LED" src="/static/Red_10x10.png" width="10" height="10">
                        {% else %}
                            <img class="led" id="PS7_LED" src="/static/Grey_10x10.png" width="10" height="10">
                        {% endif %}
                        <input title="Power Socket 7" name="PS7" type="image" src="/static/TypeH_BlueUpSideDown.png" width="110" height="112">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        {% if led_status[1] == '1' %}
                            <img class="led" id="PS2_LED" src="/static/Red_10x10.png" width="10" height="10">
                        {% else %}
                            <img class="led" id="PS2_LED" src="/static/Grey_10x10.png" width="10" height="10">
                        {% endif %}
                        <input title="Power Socket 2" name="PS2" type="image" src="/static/TypeH_BluePowerSocket.png" width="110" height="112">
                    </div>
                </td>
                <td>
                    <div>
                        {% if led_status[3] == '1' %}
                            <img class="led" id="PS4_LED" src="/static/Red_10x10.png" width="10" height="10">
                        {% else %}
                            <img class="led" id="PS4_LED" src="/static/Grey_10x10.png" width="10" height="10">
                        {% endif %}
                        <input title="Power Socket 4" name="PS4" type="image" src="/static/TypeH_BluePowerSocket.png" width="110" height="112">
                    </div>
                </td>
                <td>
                    <div>
                        {% if led_status[5] == '1' %}
                            <img class="led" id="PS6_LED" src="/static/Red_10x10.png" width="10" height="10">
                        {% else %}
                            <img class="led" id="PS6_LED" src="/static/Grey_10x10.png" width="10" height="10">
                        {% endif %}
                        <input title="Power Socket 6" name="PS6" type="image" src="/static/TypeH_BluePowerSocket.png" width="110" height="112">
                    </div>
                </td>
                <td>
                    <div>
                        {% if led_status[7] == '1' %}
                            <img class="led" id="PS8_LED" src="/static/Red_10x10.png" width="10" height="10">
                        {% else %}
                            <img class="led" id="PS8_LED" src="/static/Grey_10x10.png" width="10" height="10">
                        {% endif %}
                        <input title="Power Socket 8" name="PS8" type="image" src="/static/TypeH_BluePowerSocket.png" width="110" height="112">
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>

在我的 Flask 应用程序中，我能够识别 POST 请求。但是，不幸的是我无法识别被点击的按钮。顺便说一句，单击其中一个按钮后，我还在屏幕上收到以下错误消息：“错误请求，浏览器（或代理）发送了此服务器无法理解的请求。”

from flask import Flask, render_template, request
import telnetlib
from time import sleep

app = Flask(__name__)


@app.route('/')
def home():
    current_status = Get_Power_State()
    # print(current_status)
    return render_template("home.html", led_status=current_status)


@app.route('/', methods=['POST', 'GET'])
def index():
    if request.method == 'POST':
        print('Greattttt')
        # print(request.form.get('input'))
        if request.form['PS1']:
            print('Power Socket 1')
        elif request.form['PS2']:
            print('Power Socket 2')
        elif request.form['PS3']:
            print('Power Socket 3')
        elif request.form['image'] == 'PS4':
            print('Power Socket 4')
        elif request.form['image'] == 'PS5':
            print('Power Socket 5')
        elif request.form['image'] == 'PS6':
            print('Power Socket 6')
        elif request.form['image'] == 'PS7':
            print('Power Socket 7')
        elif request.form['image'] == 'PS8':
            print('Power Socket 8')
        else:
            pass  # unknown
    # if request.method == "POST":
    #     Power_On_Off(2, 'off')
    #     print('Power 2 On')

    return '<h1>Clicked one of the buttons</h1>'


def Get_Power_State(Retries=5):
    '''
    Get the Power State of the 8 Power Sockets
    '''
    for attempt in range(Retries):
        try:
            on_off = telnetlib.Telnet('10.0.5.8', 2016)

            on_off.write(b"S00QLE\n")
            sleep(2)
            Power_State = on_off.read_very_eager().decode("utf-8")
            if Power_State == b'':
                raise ValueError("Power Switch didn't respond")
            # Index 3 = Socket 1, Index 4 = Socket 2 ... Index 10 = Socket 8
            Power_State = [Power_State[3], Power_State[4], Power_State[5], Power_State[6],
                           Power_State[7], Power_State[8], Power_State[9], Power_State[10]]

            on_off.close()
            break
        except socket.timeout:
            continue
        except EOFError:
            continue
        except ValueError as e:
            print(e)
            continue

    # print(Power_State)

    return Power_State


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

我究竟做错了什么 ？顺便说一句，为了同时服务多个客户，我应该使用 Flask 线程选项吗？

编辑

当我单击一个按钮时，我试图用一个包含一个但甚至没有像以前那样收到 POST 请求来替换它。这是打开按钮的示例

<button title="Power Socket 1" name="PS1" value="Power1" type="button">
    <img src="/static/TypeH_BlueUpSideDown.png" width="110" height="112">
</button>

用于捕获按钮值的烧瓶代码

@app.route('/', methods=['POST', 'GET'])
def index():
    if request.method == 'POST':
        print('Greattttt')
        # print(request.form.get('input'))
        if request.form['button'] == 'Power1':
            print('Power Socket 1')
        elif request.form['button'] == 'Power2':
            print('Power Socket 2')
        elif request.form['button'] == 'Power3':
            print('Power Socket 3')
        elif request.form['button'] == 'Power4':
            print('Power Socket 4')
        elif request.form['button'] == 'Power5':
            print('Power Socket 5')
        elif request.form['button'] == 'Power6':
            print('Power Socket 6')
        elif request.form['button'] == 'Power7':
            print('Power Socket 7')
        elif request.form['button'] == 'Power8':
            print('Power Socket 8')
        else:
            pass  # unknown

     return '<h1>Clicked one of the buttons</h1>'
4

1 回答 1

1

您可以<button>在 html 中使用 a ，因为您可以在其中放置一个value包含在帖子数据中的 a 。请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

不要type=button为定义<button>，因为就像文档说的那样，默认类型是submit并且适用于按钮发送数据：

类型

按钮的默认行为。可能的值为：

submit：按钮将表单数据提交给服务器。如果没有为与 a 关联的按钮指定属性，或者该属性为空值或无效值，则这是默认值。

重置：该按钮将所有控件重置为其初始值，例如 . （这种行为往往会惹恼用户。）

button：按钮没有默认行为，默认按下时什么也不做。它可以让客户端脚本监听元素的事件，这些事件在事件发生时触发。

或者，您可以将图像输入指向不同的 URL，覆盖表单操作，但这种value方式更好，以及为什么首先进行按钮输入。

不，你可能不需要 Flask 的线程，假设你的服务器足够快地响应请求。这些页面位于浏览器的客户端，供您的多个用户使用，因此即使有一百万用户打开该页面，通常也可以。

于 2020-09-17T13:18:26.947 回答