Flask中用Javascript实现页面加载提交表单并避免重复刷新

问题描述 #

我希望通过JavaScript在页面加载时设置select选项的值并提交表单，编写了如下代码：

HTML/Jinja模板代码 #

<form id="msmSubmit" class="form-inline" name="msm_submit_form" action="{{ url_for('kpiAnaly.index') }}" method="post">
  <div style="display: flex">
    <div style="width: 200px">
      <select id="msm_code" name="msm_code">
        {% for m in msm %}
          <option value="all_msm">All</option>
          <option value="{{m}}">{{m}}</option>
        {% endfor %}
      </select>
    </div>
    <div style="margin-bottom: 20px">
      <button type="submit" class="btn btn-default">Go</button>
    </div>
  </div>
</form>

JavaScript代码 #

let form = document.getElementById("msmSubmit");
function handleForm(event) {
  event.preventDefault();
}
function selectElement(id, valueToSelect) {
  let element = document.getElementById(id);
  element.value = valueToSelect;
}
function onLoadSubmit() {
  //设置select选项的值
  selectElement("msm_code", "bob");
  //页面加载时提交表单
  document.msm_submit_form.submit();

  //阻止默认行为：我以为这样能避免持续刷新
  form.addEventListener("submit", handleForm);
}
//页面加载时运行函数
window.onload = onLoadSubmit;

但现在页面持续刷新，请问原因是什么？如何实现页面加载时自动提交表单且不出现持续刷新的情况？

原因分析 #

1. 无限提交循环：表单提交后，服务器会返回目标页面（kpiAnaly.index对应的页面），而这个新页面加载时又会触发window.onload事件，再次执行提交表单的代码，形成无限循环，导致页面持续刷新。
2. 事件监听时机无效：你是在提交表单之后才添加submit事件监听，这时候第一次提交已经触发，且该监听只能阻止后续的默认提交行为，无法解决“每次页面加载都触发提交”的核心循环问题。

解决方案 #

核心思路是让页面仅在首次加载时执行一次自动提交，或者直接通过服务器端逻辑避免前端重复触发提交，以下是两种可行方案：

方案一：通过URL标记避免重复提交 #

在表单提交后，让服务器重定向时携带一个标记参数，前端检测到该参数就不再执行自动提交逻辑：

修改后的JavaScript代码

let form = document.getElementById("msmSubmit");

function selectElement(id, valueToSelect) {
  let element = document.getElementById(id);
  element.value = valueToSelect;
}

function onLoadSubmit() {
  // 检查URL中是否存在已提交的标记
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.has('submitted')) {
    return; // 已提交过，终止执行
  }

  // 设置select选项值并提交表单
  selectElement("msm_code", "bob");
  form.submit();
}

window.onload = onLoadSubmit;

服务器端（Flask）示例修改

在kpiAnaly.index视图函数中，处理POST请求后重定向到带标记参数的页面：

from flask import redirect, url_for, request

@app.route('/kpi-analy', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        # 处理表单提交逻辑
        # ...
        # 重定向时添加已提交标记
        return redirect(url_for('kpiAnaly.index', submitted='1'))
    # GET请求的页面渲染逻辑
    return render_template('your_template.html', msm=your_msm_data)

方案二：服务器端直接设置默认值（更高效） #

既然需要默认选中bob并提交，完全可以在服务器端渲染页面时就设置好select的默认值，无需前端触发自动提交，从根源避免循环：

修改HTML/Jinja模板

调整select选项的默认选中逻辑：

<select id="msm_code" name="msm_code">
  <option value="all_msm" {% if default_msm == 'all_msm' %}selected{% endif %}>All</option>
  {% for m in msm %}
    <option value="{{m}}" {% if default_msm == m %}selected{% endif %}>{{m}}</option>
  {% endfor %}
</select>

服务器端（Flask）传递默认值

在视图函数中传入default_msm变量：

@app.route('/kpi-analy', methods=['GET', 'POST'])
def index():
    default_msm = 'bob'
    if request.method == 'POST':
        # 处理表单提交逻辑
        # ...
    return render_template('your_template.html', msm=your_msm_data, default_msm=default_msm)

如果需要直接执行bob对应的业务逻辑，可在首次GET请求时直接处理，无需前端提交表单，既高效又不会出现循环问题。

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