📅 最后修改于: 2023-12-03 15:28:17.794000 🧑 作者: Mango
当我们提交一个表单的时候，通常都需要将表单数据进行处理，并将结果返回给用户。在这个过程中，如果我们能够将结果直接显示在表单下方，就能够为用户提供更好的用户体验。
实现这个功能的方法很多，可以使用 JavaScript 来实现异步提交表单，也可以使用后端代码来处理表单数据，并将结果渲染到页面中。在这里，我们以 Flask 框架为例，演示如何在提交表单后，将结果显示在表单下方。
首先，我们需要创建一个 Flask 应用，并为其添加一个路由，用来接收表单数据和处理结果。可以使用 Flask 提供的 request 模块来获取表单数据，使用 Jinja2 模板来渲染页面，并在页面中使用 Flask 提供的 flash 方法来显示提示信息。
from flask import Flask, request, render_template, flash
app = Flask(__name__)
app.secret_key = 'your_secret_key'
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
# 处理表单数据
name = request.form.get('name')
age = request.form.get('age')
# 处理结果
result = f'{name} is {age} years old.'
# 显示提示信息
flash(result)
return render_template('index.html')
在上面的代码中，当用户提交表单时，index 函数会接收到 POST 请求，并从请求中获取 name 和 age 参数。接着，我们将这些参数拼接成一个字符串，将其存储在 result 变量中，并使用 flash 方法将其存储在 Flask 提供的 session 中。最后，我们使用 render_template 方法渲染一个名为 index.html 的模板文件，并返回给用户。
在模板文件中，我们可以使用 Flask 提供的 get_flashed_messages 方法来获取之前存储在 session 中的提示信息，并将其显示在页面中。在代码中，我们使用 Bootstrap 框架来美化页面，并使用表单元素来接收用户的输入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输出后提交的表单显示在表单示例下方</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="mt-5 mb-4">输出后提交的表单显示在表单示例下方</h1>
{% for message in get_flashed_messages() %}
<div class="alert alert-info">{{ message }}</div>
{% endfor %}
<form method="post">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="number" class="form-control" id="age" name="age" min="1" max="150" required>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</body>
</html>
在上面的代码中，我们使用了 Jinja2 模板语言来创建一个循环，用来遍历使用 get_flashed_messages 方法获取到的提示信息。接着，我们在表单下方创建了一个表格，并使用 Bootstrap 样式对其进行美化。最后，我们在表格中添加了两个输入框和一个提交按钮，用来接收用户的输入。
在浏览器中访问该应用程序，就可以看到表单已经显示在页面中了。当我们输入姓名和年龄后，点击提交按钮，页面会重新加载，并在表单下方显示一个提示信息，该信息就是我们提交的表单数据处理结果。
Outputs after submission of Form displayed below the form.
---------------------------------------------------------
姓名： [ ]
年龄： [ ]
[提交]
从上面的示例中，我们可以看到，使用 Flask 和 Bootstrap 框架，我们可以很容易地实现将表单提交结果显示在表单下方的功能。这种方法可以为用户提供更好的用户体验，并且可以减少用户在表单和结果之间切换的操作。