时间戳

首页 > 解决方案 > 使用烧瓶和 python 更新提交按钮上的 HTML 页面

python - 使用烧瓶和 python 更新提交按钮上的 HTML 页面

问题描述

我想要实现的目标：我正在创建这个小型 Web 应用程序，它将通过 telnet 连接到给定的 ip/s，发送一些命令，取回一些响应并将它们显示在 html 页面中。我上面提到的一切都将发生在同一页面上。大多数东西都在工作。

问题：我试图textarea在按下submit按钮后，在我提交 telnet 命令的同一个 HTML 页面中显示从这些 ip/s 返回的响应/s。响应以列表的形式发送回 html_template player_responses。现在发生的事情是我的循环textarea为响应列表中的每个元素创建了一个新元素，这并不酷。![当前行为] https://imgur.com/a/4PCNEjs 我只想textarea用所有响应更新已经存在的。这发生<div id="console">在我的player-poll.html

免责声明：我是菜鸟，大部分时间都不知道自己在做什么。

为了我的辩护，我浏览了建议的帖子并自己进行了一些研究，但没有找到解决我困境的答案。

应用程序.py

@app.route('/player-poll', methods=['GET', 'POST'])
def player_poll():
    form = PlayerPollForm()
    player_responses = []
    if request.method == 'POST':
        for i in form.ip_addr.data.split():
            player_responses.append(f'Response from {i} is TELNET_ RESPONSE')
            print(f'Item fount {i}')
        print(player_responses)
    return render_template('player-poll.html', title='Player Poll', form=form, len_player_responses=len(player_responses), player_responses=player_responses)

表格.py


class PlayerPollForm(FlaskForm):
    ip_addr = TextAreaField('Players IP address one per line:', validators=[DataRequired()])
    cmd = StringField('Command:', validators=[DataRequired()])
    freq = FloatField('Frequency in sec:', validators=[DataRequired()])
    count = IntegerField('Number of Iterations:', validators=[DataRequired()])
    submit = SubmitField('Send Command')
    logs = TextAreaField('Player Logs:')

播放器-poll.html

{% extends "template_layout.html" %}
{% block content %}
    <div class="content-section">
        <form action="{{ url_for('player_poll') }}" method="POST">
            {{ form.hidden_tag() }}
            <fieldset class="form-group">
                <div class="form-group">
                    <legend class="border-bottom mb-4">Player Poll</legend>
                    <div id="row-1" class="row">
                        <div id="col-1" class="col">
                            {{ form.ip_addr.label(class="form-control-label") }}
                        </div>
                    </div>
                    <div id="row-2" class="row">
                        <div id="col-1" class="col">
                            {{ form.ip_addr(class="form-control", rows="10", placeholder="Type your player ip addresses here, one per line.") }}
                        </div>
                        <div id="col-2" class="col">
                            <div id="row-2-6" class="row" style="padding-right: 15px">
                                <div class="col-sm-8 text-left" style="padding-left: 0">
                                    {{ form.submit(class="btn btn-primary btn-lg") }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="console" class="row" style="padding-left: 15px; padding-right: 15px">
                        <legend class="border-bottom mb-2">Player Poll Logs:</legend>
                        <textarea id=playerPollLog class="form-control form-group" rows=17">Responses</textarea>
                        {% if request.method == 'POST' %}
                            {% for i in range(0, len_player_responses) %}
                                <textarea id=playerPollLog class="form-control form-group" rows=17">{{ player_responses[i] }}</textarea>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
{% endblock content %}

标签： pythonhtmlflaskflask-wtforms

解决方案

我不知道我是否理解 - 但如果你只想要一个文本区域，那么不要在 -loop 中创建它们，而是在现有的 -loop 中for使用for<textarea>

   <textarea id=playerPollLog class="form-control form-group" rows="17">Responses
        {% for response in player_responses %}
            {{ response }}
        {% endfor %}
   </textarea>

最终，您可以连接所有响应app.py并将其作为单个字符串发送到 tempalte - 即。player_all_responses.

   <textarea id=playerPollLog class="form-control form-group" rows="17">Responses
        {{ player_all_responses }}
   </textarea>

推荐阅读