render_template 没有更新烧瓶中的页面

Question

我试图渲染一个页面两次：一个是空表单，另一个是在该表单下，应该显示 POST 请求的结果。我知道这不是最漂亮的方式，但我对 js 或 ajax 一无所知，现在更喜欢这种解决方案。但是，我无法做到这一点，因为网站总是在第一个呈现的页面上。这是我的代码：

from flask import Flask, render_template, request, redirect, url_for
import requests


app = Flask(__name__)
#app.secret_key = 'super_secret'

@app.route('/')
def home():
    return render_template("Home.html")


@app.route('/process', methods=['POST', 'GET'])
def process():
    casa = request.form['casa']
    trasferta = request.form['trasferta']
    r = requests.get(url="http://127.0.0.1:5000/?casa={casa}&trasferta={trasferta}".format(casa=casa, trasferta=trasferta))
    #flash(r.text)
    return render_template('Home.html', winner=r.text)


if __name__ == '__main__':
    app.run(debug=True, port=3000)

每次按下按钮时都会正确处理请求，并且在请求之前肯定会执行代码，但屏幕上没有显示任何新内容。在 Home.html 文件中，我放置了一个变量 nams 获胜者，如下所示：

<div class="output">
    <h2>{{ winner }}</h2>
</div>

提前感谢任何愿意提供帮助的人。

更新

我做了一些更改，但结果是一样的：

@app.route('/')
def home():
    return render_template("Home.html")

@app.route('/result/<winner>')
def print_winner(winner):
    return render_template('Home.html', winner=winner)

@app.route('/process', methods=['GET'])
def process():
    casa = request.args.get("casa")
    trasferta = request.args.get("trasferta")
    r = requests.get(url="http://127.0.0.1:5000/?casa={casa}&trasferta={trasferta}".format(casa=casa, trasferta=trasferta))
    #flash(r.text)
    print(r.text)
    return redirect(url_for('print_winner', winner = r.text), 200)



if __name__ == '__main__':
    app.run(debug=True, port=3000)

如您所见，现在我正在使用一个 GET 请求，并且一个新函数可以根据需要呈现页面。问题是：当有人点击提交按钮时，请求被满足，但网站上没有任何变化（链接和以前一样，页面上没有任何变化）。

这是整个 HTML 表单：

        <form action="{{url_for('process')}}" method="GET" class="u-clearfix u-form-horizontal u-form-spacing-15 u-inner-form" style="padding: 15px;">
          <div class="u-form-group u-form-name">
            <label class="u-form-control-hidden u-label">Casa</label> <input type="text" placeholder="Squadra in casa" name="casa" class="u-border-1 u-border-grey-30 u-input u-input-rectangle" required="">
          </div>
          <div class="u-form-email u-form-group">
            <label class="u-form-control-hidden u-label">Trasferta</label> <input type="text" placeholder="Squadra ospite" name="trasferta" class="u-border-1 u-border-grey-30 u-input u-input-rectangle" required="">
          </div>
          <div class="u-form-group u-form-submit">
            <a href="{{url_for('process')}}" class="u-btn u-btn-submit u-button-style u-palette-2-base u-btn-1">AVVIA SIMULAZIONE<br></a> <input type="submit" value="submit" class="u-form-control-hidden">
          </div>
        </form>

Answer 1

在您的表单中，您有两个按钮。第一个是简单的<a>：

<a href="{{url_for('process')}}" class="u-btn u-btn-submit u-button-style u-palette-2-base u-btn-1">AVVIA SIMULAZIONE<br></a>

这个对用户可见，但它实际上不提交表单，因为它只是一个简单的<a> 元素，位于表单内。

然后你有第二个按钮：

<input type="submit" value="submit" class="u-form-control-hidden">

这对用户不可见，因为您在其上应用了u-form-control-hidden CSS 类。但是根据定义，这是可以实际提交 HTML 表单的表单。但是你永远不能点击它，因为它被 CSS 隐藏了。

只需删除<a> 按钮，并使实际的提交按钮可见，或者您可以添加一些JS 魔术，在<a> 按钮上的单击事件后提交表单。