Flask跨函数传递用户输入 同页面渲染后端表格数据

你现有代码存在几个基础错误，导致逻辑完全跑不通：

• 同一路径/home绑定了两个独立视图函数，Flask会以最后注册的函数为准，前一个函数的逻辑根本不会执行
• 路由没有显式声明允许POST方法，默认只响应GET请求，表单提交POST会直接返回405错误
• Python函数有独立作用域，两个平级的视图函数里的变量完全不互通，不可能在第二个函数里直接拿到第一个函数里的number值
• 前端模板没有编写带输入控件的提交表单，且输入控件没有设置对应name属性，请求根本不会携带用户输入的参数，后端自然拿不到值
• 代码里存在拼写错误：render_tamplate应为render_template，运行会直接抛函数不存在的异常

你不需要用session、跨函数传值这类绕弯的方案，直接在同一路由下处理GET/POST逻辑即可，你独立编写的aggregation函数不需要做任何Flask适配，正常传参调用就行。下面提供两种实现方式，按需选择：

方案1：基础表单提交（无跨页跳转，当前页刷新渲染结果） #

第一步：重写后端路由逻辑 #

from flask import Flask, render_template, request
app = Flask(__name__)
# 正常导入你独立编写的aggregation模块即可，不需要做任何修改
from your_own_module import aggregation

@app.route("/home", methods=["GET", "POST"])
def home():
    # 给返回值设空默认值，首次GET打开页面时模板渲染不会报错
    platform = None
    scoring = None
    user_input_num = None

    if request.method == "POST":
        # 从表单数据中取name为number的输入值，注意和前端input的name属性保持一致
        user_input_num = request.form.get("number")
        if user_input_num:
            # 直接传参调用你自己写的业务逻辑
            agg_instance = aggregation(user_input_num)
            platform = agg_instance.get_something()
            scoring = agg_instance.do_something()

    # 不管GET/POST都渲染同一个模板，传入计算结果
    return render_template(
        'home.html',
        platform=platform,
        scoring=scoring,
        user_input_num=user_input_num
    )

第二步：补全前端模板逻辑 #

<!-- 新增用户输入表单，提交到当前路径，方法为POST -->
<form method="POST" action="/home">
  <div>
    <label>请输入计算数值</label>
    <!-- 必须设置name="number"，否则后端拿不到输入值 -->
    <input type="text" name="number" value="{{ user_input_num if user_input_num else '' }}" required>
  </div>
  <button type="submit">提交计算</button>
</form>

<!-- 结果表格，只有拿到计算结果后才渲染对应行 -->
<table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Score</th>
        <th scope="col">Platform</th>
        <th scope="col">Info</th>
      </tr>
    </thead>
    <tbody>
      {% if scoring and platform %}
      <tr>
        <th scope="row">计算结果</th>
        <td>{{ scoring }}</td>
        <td>{{ platform }}</td>
        <td>@asdfa</td>
      </tr>
      {% endif %}
    </tbody>
</table>

这个方案提交后只会在当前/home页刷新，不会跳转到其他页面。

方案2：AJAX无刷新提交（页面完全不重载，实时更新结果） #

如果需要做到提交后完全不刷新页面，就在上面的基础上加一个接口，前端用JS异步取数渲染即可。

后端新增计算接口 #

@app.route("/api/calc", methods=["POST"])
def calc_agg():
    user_input_num = request.form.get("number")
    if not user_input_num:
        return {"code": 400, "msg": "参数缺失"}, 400
    agg_instance = aggregation(user_input_num)
    return {
        "code": 200,
        "data": {
            "platform": agg_instance.get_something(),
            "scoring": agg_instance.do_something()
        }
    }

前端加少量JS处理异步提交 #

<form id="calcForm">
  <div>
    <label>请输入计算数值</label>
    <input type="text" name="number" id="numInput" required>
  </div>
  <button type="submit">提交计算</button>
</form>

<table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Score</th>
        <th scope="col">Platform</th>
        <th scope="col">Info</th>
      </tr>
    </thead>
    <tbody id="resultArea"></tbody>
</table>

<script>
const form = document.getElementById('calcForm')
const resultArea = document.getElementById('resultArea')
form.addEventListener('submit', async (e) => {
  // 阻止表单默认的刷新提交行为
  e.preventDefault()
  const formData = new FormData(form)
  const resp = await fetch('/api/calc', {method: 'POST', body: formData})
  const ret = await resp.json()
  if (ret.code === 200) {
    // 动态插入结果行
    resultArea.innerHTML = `
      <tr>
        <th scope="row">计算结果</th>
        <td>${ret.data.scoring}</td>
        <td>${ret.data.platform}</td>
        <td>@asdfa</td>
      </tr>
    `
  }
})
</script>

• 普通表单POST提交的参数要用request.form.get()获取，request.args只用来取URL问号拼接的GET参数，request.data用来接收原始JSON/二进制请求体，普通表单场景不需要用
• 表单里的输入控件必须设置name属性，否则提交时不会携带对应字段的数据，后端不可能拿到值
• 简单场景不需要滥用session存临时数据，同路由内完全可以处理完所有逻辑，减少不必要的复杂度

内容的提问来源于stack exchange，提问作者ItsJustMe