Python Flask表格行输入值传递异常及ID传递实现求助

问题描述 #

我是Python/Flask新手，正在开发一款应用，允许用户修改规则对应的分数值以查看效果。用户输入新分数后点击「Recalculate」按钮，目前发现仅第一行的输入值能传递到Python后端，其余行的输入值无法传递，怀疑问题出在HTML文件中。同时想请教如何传递对应行的ID？

附上我的HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weweighting</title>
    <link rel="stylesheet" href="/static/css/stylesheet_rules.css" />
  </head>
  <body>
  
  <h1> Rule de tool </h1>
<form method="post">
  <table>
    <tr>
        {% for col in column_names %}
        <th>{{col}}</th>
        {% endfor %}
    </tr>
    {% for row in row_data %}
    <tr>
        {% for col, row_ in zip(column_names, row) %}
        
        {% if col == last_column  %}
        <td>
            {{ row_ }}
            <input type="text" name="newval" value= "{{text}}" type="number"> 
            <input class="button" type="submit" formaction ="/recalculate" value ="Recalculate" />
        </td>
        {% else %}
        <td>{{row_}}</td>
        {% endif %}
        {% endfor %}
    </tr>
    {% endfor %}
    
</table>
    
</form>
  </body>
</html>

问题原因及解决办法 #

1. 多行输入无法传递的问题 #

问题出在所有输入框的name都是newval——表单提交时，同名输入只会保留最后一个（或第一个，取决于浏览器），所以只有第一行的值能传到后端。

解决办法：给每个输入框的name加上唯一标识，比如行ID或者循环索引：

• 用行ID（假设row[0]是该行的ID字段）：

<input type="number" name="newval_{{ row[0] }}" value="{{ text }}">

• 用循环索引：

{% for idx, row in enumerate(row_data) %}
<tr>
    {% for col, row_ in zip(column_names, row) %}
    {% if col == last_column  %}
    <td>
        {{ row_ }}
        <input type="number" name="newval_{{ idx }}" value="{{ text }}"> 
        <input class="button" type="submit" formaction="/recalculate" value="Recalculate" />
    </td>
    {% else %}
    <td>{{row_}}</td>
    {% endif %}
    {% endfor %}
</tr>
{% endfor %}

另外，你写的输入框重复了type属性（type="text"和type="number"），删掉type="text"，保留type="number"更适合分数输入场景。

2. 传递对应行的ID #

有两种常用方式：

• 隐藏输入框：在每行提交按钮旁加隐藏字段存储ID：

{% for row in row_data %}
<tr>
    {% for col, row_ in zip(column_names, row) %}
    {% if col == last_column  %}
    <td>
        {{ row_ }}
        <input type="number" name="newval" value="{{ text }}"> 
        <input type="hidden" name="row_id" value="{{ row[0] }}"> <!-- 假设row[0]是ID -->
        <input class="button" type="submit" formaction="/recalculate" value="Recalculate" />
    </td>
    {% else %}
    <td>{{row_}}</td>
    {% endif %}
    {% endfor %}
</tr>
{% endfor %}

后端接收：

from flask import request

@app.route('/recalculate', methods=['POST'])
def recalculate():
    row_id = request.form.get('row_id')
    new_val = request.form.get('newval')
    # 后续处理逻辑

• URL路径传参：把ID拼接到提交路径里：

<input class="button" type="submit" formaction="/recalculate/{{ row[0] }}" value="Recalculate" />

后端路由配置：

@app.route('/recalculate/<int:row_id>', methods=['POST'])
def recalculate(row_id):
    new_val = request.form.get('newval')
    # 后续处理逻辑

额外优化 #

如果希望每行独立提交互不干扰，可以把每行包裹在单独的<form>标签里：

{% for row in row_data %}
<tr>
    <form method="post" action="/recalculate">
        {% for col, row_ in zip(column_names, row) %}
        {% if col == last_column  %}
        <td>
            {{ row_ }}
            <input type="number" name="newval" value="{{ text }}"> 
            <input type="hidden" name="row_id" value="{{ row[0] }}">
            <input class="button" type="submit" value="Recalculate" />
        </td>
        {% else %}
        <td>{{row_}}</td>
        {% endif %}
        {% endfor %}
    </form>
</tr>
{% endfor %}

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