Flask中处理POST请求复选框选择并写入文件的问题（二次POST返回404）

问题分析与解决方案 #

1. 404错误根源 #

当前Flask路由虽支持POST请求，但未区分两个表单的提交动作。当第二个复选框表单提交时，代码仍尝试调用API获取应用数据，但此时缺少operating_app_sys参数，可能导致API返回404，或因未处理该场景引发异常（表现为Flask返回404）。此外，HTML中存在无效的闭合表单标签，可能干扰表单提交逻辑。

2. 后端代码修正 #

修改路由逻辑，区分两个POST动作：一个用于获取应用数据，另一个用于保存选中的应用到文件。

from flask import request, render_template

@app.route("/Application", methods=['GET', 'POST'])
def get_system_app_data():
    operating_app_sys = None
    form = ApplicationForm()
    applications = None
    api_call = aggregation.api(something)
    message = ""

    if request.method == 'POST':
        # 区分两个表单的提交动作
        if 'submit' in request.form:
            # 处理第一个表单：获取应用数据
            if form.validate_on_submit():
                operating_app_sys = form.operating_app_sys.data
                applications = api_call.get_systems_running_app(operating_app_sys)
        elif 'btn' in request.form:
            # 处理第二个表单：保存选中的应用到文件
            selected_apps = request.form.getlist('mycheck')
            with open('file.txt', 'w') as f:
                f.write('\n'.join(selected_apps))
            message = "已成功保存选中的应用"
    
    return render_template('application.html', form=form, applications=applications, message=message)

3. 前端HTML修正 #

移除无效标签，修复复选框value值（当前固定为"1"无法区分应用），添加条件渲染优化体验：

<form method="POST" action="">
  {{ form.hidden_tag() }}

  {{ form.operating_app_sys.label(class="form-label form-label-lg") }}
  {{ form.operating_app_sys(class="form-control form-control-lg") }}
  <br>
  {{ form.submit(class="btn btn-danger") }}
</form>
<br>

{% if applications %}
<form method="POST" action="">
  {%- for customer in applications %}
    {%- if customer.get("name") == "1" %}
      {%- for team in customer.get("app_name", []) %}
        {{ team.get('app_name') }}
        <input type="checkbox" value="{{ team.get('app_name') }}" name="mycheck">
        <br>
      {%- endfor %}
    {%- endif %}
  {%- endfor %}
  <input type="submit" name="btn" value="保存选中应用">         
</form>
{% endif %}

{% if message %}
<div class="alert alert-success">{{ message }}</div>
{% endif %}

关键修改说明 #

• 动作区分：通过检查提交按钮的name属性，避免无效API调用，明确处理不同表单的提交逻辑。
• 复选框优化：将value设置为实际应用名称，确保保存的内容能准确对应选中的应用。
• HTML结构修复：移除多余的</form>标签，仅当有应用数据时显示复选框表单。
• 用户反馈：添加保存成功提示，提升交互体验。

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