Flask中提交Jinja2模板生成的表格时request.form为空的问题求助

最近在开发一个批量导入功能，需求是让用户上传CSV文件后，在页面的可编辑表格里修改内容，最后提交更新到数据库。目前上传文件、生成可编辑表格、页面修改内容这些环节都没问题，但点击提交按钮后，后端打印request.form居然是空的！我甚至参考了htmx的批量更新示例调整代码，结果还是一样，实在摸不着头脑，来请教各位大佬！

我当前的代码片段： #

模板文件 auth/import_data.html

<form method="post">
  <table name="import-table" contenteditable="true" border="1" cellspacing="0">
    <thead>
      <tr>
        {% for h in headers %}
        <th scope="col">{{h}}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for r in dat %}
      <tr name="rows">
        {% for d in r %}
        <td>{{d}}</td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <input type="submit" value="Bulk Import">
</form>

后端代码 auth.py

import csv
import os
from flask import(
    Blueprint, current_app, flash, g, redirect, render_template, request, session, url_for
)
from flaskr.db import get_db

bp = Blueprint('auth', __name__, url_prefix='/auth')

@bp.route('/import_data', methods=('GET', 'POST'))
def import_data():
    if request.method == 'POST':
        print(request.form)  # 这里打印出来是空的ImmutableMultiDict([])
        return redirect(url_for('index'))
    
    # 测试用的本地CSV文件读取
    with open('testfile.csv', newline='') as f:
        contents = list(csv.reader(f, delimiter=',', quotechar='|'))
    return render_template('auth/import_data.html', headers=contents[0], dat=contents[1:])

问题原因分析 #

其实核心问题很简单：HTML表单默认只会提交带有name属性的表单控件（如<input>、<select>、<textarea>等）的值，而我们现在的表格里只有普通的<td>文本元素，这些不属于表单控件，所以当点击提交按钮时，浏览器不会把表格里的内容打包进HTTP请求中，后端自然就拿不到任何数据，request.form为空也就不奇怪了。

解决方案 #

这里提供两种常用的解决思路，你可以根据需求选择：

方案一：将表格单元格替换为表单输入控件

把每个单元格的文本改成可编辑的<input>框，并给每个输入框设置合理的name属性，这样表单提交时就能自动携带这些输入框的值。

修改模板中的<tbody>部分：

<tbody>
  {% for row_idx, r in enumerate(dat) %}
  <tr name="rows">
    {% for col_idx, d in enumerate(r) %}
    <!-- 用列名+数组的方式命名，方便后端按列收集数据 -->
    <td><input type="text" name="{{headers[col_idx]}}[]" value="{{d}}" style="border:none; width:100%;"></td>
    {% endfor %}
  </tr>
  {% endfor %}
</tbody>

后端获取数据的方式：

@bp.route('/import_data', methods=('GET', 'POST'))
def import_data():
    if request.method == 'POST':
        # 从session中取出之前存储的表头
        headers = session.get('import_headers', [])
        # 按列名获取每一列的所有值
        table_data = []
        for header in headers:
            column_values = request.form.getlist(f"{header}[]")
            table_data.append(column_values)
        # 转置行列，得到每一行的数据
        rows = list(zip(*table_data))
        print(rows)  # 现在就能拿到所有修改后的表格行数据了
        # 后续处理存入数据库的逻辑...
        return redirect(url_for('index'))
    
    # 读取CSV的逻辑不变
    with open('testfile.csv', newline='') as f:
        contents = list(csv.reader(f, delimiter=',', quotechar='|'))
    headers = contents[0]
    dat = contents[1:]
    # 把headers存到session里，方便POST请求时使用
    session['import_headers'] = headers
    return render_template('auth/import_data.html', headers=headers, dat=dat)

方案二：用JavaScript在提交前收集表格数据（推荐，用户体验更好）

如果想保留页面上原生表格的视觉效果（不用每个单元格都显示成输入框），可以借助JavaScript在表单提交前，手动收集表格里的内容，存入一个隐藏的表单控件中，再一起提交。

修改HTML表单，添加一个隐藏的<textarea>和JavaScript代码：

<form method="post">
  <table name="import-table" contenteditable="true" border="1" cellspacing="0">
    <!-- 表格内容不变 -->
  </table>
  <!-- 隐藏的textarea，用来存放JSON格式的表格数据 -->
  <textarea name="table_data" style="display: none;"></textarea>
  <input type="submit" value="Bulk Import">
</form>

<!-- 添加JavaScript代码 -->
<script>
document.querySelector('form').addEventListener('submit', function(e) {
  // 1. 获取表格元素
  const table = document.querySelector('table[name="import-table"]');
  // 2. 收集表头
  const headers = Array.from(table.querySelectorAll('thead th')).map(th => th.textContent.trim());
  // 3. 收集每一行的单元格内容
  const rows = Array.from(table.querySelectorAll('tbody tr')).map(tr => {
    return Array.from(tr.querySelectorAll('td')).map(td => td.textContent.trim());
  });
  // 4. 把数据转成JSON格式，存入隐藏的textarea
  const tableData = JSON.stringify({ headers, rows });
  document.querySelector('textarea[name="table_data"]').value = tableData;
});
</script>

后端获取数据的方式：

import json

@bp.route('/import_data', methods=('GET', 'POST'))
def import_data():
    if request.method == 'POST':
        # 解析隐藏textarea里的JSON数据
        table_data = json.loads(request.form.get('table_data'))
        headers = table_data['headers']
        rows = table_data['rows']
        print(rows)  # 这里就是修改后的所有表格行数据
        # 后续存入数据库的逻辑...
        return redirect(url_for('index'))
    
    # 读取CSV的逻辑不变
    with open('testfile.csv', newline='') as f:
        contents = list(csv.reader(f, delimiter=',', quotechar='|'))
    return render_template('auth/import_data.html', headers=contents[0], dat=contents[1:])

这两种方案都能解决request.form为空的问题，方案二更贴近原生表格的编辑体验，推荐优先尝试~

内容来源于stack exchange