使用 Flask 和 python 更新提交按钮上的 HTML 页面

Update HTML page on submit button with flask and python

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

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

中的 <div id="console">

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

为了我的辩护,我浏览了建议的帖子并自己做了一些研究,但是没有找到我的困境的答案。

app.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)

forms.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 %}

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

   <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>