Flask POST后为何需重定向？DecimalRangeField滑块同步异常求助

在fans蓝图中，通过SQLAlchemy操作SQLite做数据持久化，用Flask-WTF渲染多个风扇控制表单时遇到以下问题：当存在2个及以上风扇实例时，调整其中一个滑块，其他滑块的视觉显示会同步变化，但DecimalRangeField的实际数据值并未改变。添加代码中标注的重定向后问题消失，删除则触发异常。

相关代码展示 #

带重定向修复的routes.py #

@bp.route('/', methods=['GET', 'POST'])
def fans_index():
    fans = Fan.query.all()
    if fans.__len__() == 0:
      return redirect(url_for('fans.newfan'))
    form = FanForm(request.form)
    if form.validate_on_submit(): # request.method == 'POST'
      for fan in fans:
        if fan.name == form.name.data:
          fan.swtch = form.swtch.data
          fan.speed = round(form.speed.data)
          db.session.commit()
      return redirect(url_for('fans.fans_index')) # <-- 此行必须保留，原因是什么？
    else: # request.method == 'GET'
      pass
    forms = []
    for fan in fans:
      form = FanForm()
      form.name.data = fan.name
      form.swtch.data = fan.swtch
      form.speed.data = fan.speed
      forms.append(form)
    return render_template('fans_index.html', title='Fans!', forms=forms)

FanForm表单类 #

class FanForm(FlaskForm):
    name = HiddenField('Name')
    swtch = BooleanField('Switch', render_kw={'class': 'swtch'})
    speed = DecimalRangeField('Speed', render_kw={'class': 'speed'}, validators=[DataRequired()])
    submit = SubmitField('Save Fan')

HTML模板 #

<h1>Fans</h1>
<div class="container">
    <div class="row">
        {% for form in forms %}
        <div class="col mx-1 shadow-5-strong border border-white rounded" style="max-width: 220px">
            <h2 class="ms-1">{{ form.name.data }}:</h2>
            <form class="mx-auto ms-3" name="{{ form.name.data }}" action="" method="post">
                {{ form.hidden_tag() }}
                <div>{{ form.name }}</div> 
                <p>
                    {{ form.speed.label }}: <span class="speed_display_val">{{ form.speed.data | round }}%</span><br>
                    {{ form.speed(min=20) }}<br>
                    {% for error in form.speed.errors %}
                    <span style="color: red;">[{{ error }}]</span>
                    {% endfor %}
                </p>
                <p>
                  {{ form.swtch.label }} <span class="ms-3">{{ form.swtch }}</span><br>
                  {% for error in form.swtch.errors %}
                  <span style="color: red;">[{{ error }}]</span>
                  {% endfor %}
                </p>
                <p>{{ form.submit }}</p>
            </form>
        </div>
        {% endfor %}
    </div>
</div>

前端交互JavaScript #

/* script to animate the slider value changing and post data on slider mouseup or switch click */
const values = Array.from(document.getElementsByClassName('speed_display_val'));
const speeds = Array.from(document.getElementsByClassName('speed'));
const swtches = Array.from(document.getElementsByClassName('swtch')); //Note: switch is a reserved word in JS

speeds.forEach((speed, i) => {
  speed.oninput = (e) => { values[i].textContent = Math.round(e.target.value) + '%' };
  speed.onmouseup = () => { speed.form.requestSubmit() };
});
swtches.forEach((swtch) => {
  swtch.onclick = () => { swtch.form.requestSubmit() };
});

问题原因及重定向必要性说明 #

1. 滑块视觉同步异常的根源 #

Flask-WTF默认会给同一类表单字段生成相同的name属性值。当提交某个风扇的表单后，浏览器会将提交的滑块值填充到页面上所有同名的<input>元素中，导致所有滑块视觉上同步变化，但实际上只有被修改的风扇数据在数据库中更新了，其他风扇的实际值并未改变。

2. 重定向为什么能解决问题 #

当不使用重定向时，表单提交后服务器直接渲染页面，此时浏览器会保留POST请求的上下文，刷新页面时会触发重复提交，同时浏览器会用最后一次提交的字段值填充所有同名输入框，造成视觉异常。

而采用Post/Redirect/Get（PRG）模式（即提交后重定向到GET请求），浏览器会发起全新的GET请求获取页面，此时所有表单字段都会从数据库读取最新的正确值，彻底避免了浏览器自动填充同名字段带来的混淆问题。

彻底解决字段混淆的额外方案 #

除了保留重定向，还需要给每个表单的字段设置唯一的name属性，从根源上避免浏览器混淆不同风扇的字段：
修改routes.py中生成表单的代码：

forms = []
for fan in fans:
  form = FanForm()
  form.name.data = fan.name
  # 为每个字段设置唯一name，避免浏览器混淆
  form.name.name = f"name_{fan.name}"
  form.swtch.name = f"swtch_{fan.name}"
  form.speed.name = f"speed_{fan.name}"
  form.swtch.data = fan.swtch
  form.speed.data = fan.speed
  forms.append(form)

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