如何在Flask中无需提交按钮，下拉框选项选中时自动发送POST请求？

很简单！要实现下拉选项选中后自动提交POST请求，不需要额外的提交按钮，只需要给你的下拉框加一点JavaScript逻辑，同时调整一下Flask路由里的小问题就行。下面是具体的修改方案：

1. 修改HTML表单 #

给<select>元素添加onchange事件，当用户切换选项时自动提交表单，同时可以移除原来的提交按钮（或者隐藏它）：

<form method="POST" action="" id="order-form">
  <select class="btn btn-primary btn-sm dropdown-toggle" name="order-by" id="order" 
          onchange="document.getElementById('order-form').submit();"
          aria-haspopup="true" aria-expanded="false">
    <option value="Default" {% if order_by==None %} selected {% endif %}>Default</option>
    <option value="Recent" {% if order_by =="Recent" %} selected {% endif %}>Recent</option>
    <option value="Alphabetically (A-Z)" {% if order_by=="Alphabetically (A-Z)" %} selected {% endif %}>Alphabetically (A-Z)</option>
    <option value="Alphabetically (Z-A)" {% if order_by =="Alphabetically (Z-A)" %} selected {% endif %}>Reverse Alphabetically (Z-A)</option>
    <option value="Follower Count (High-Low)" {% if order_by =="Follower Count (High-Low)" %} selected {% endif %}>Follower Count (High to Low)</option>
    <option value="Follower Count (Low-High)" {% if order_by =="Follower Count (Low-High)" %} selected {% endif %}>Follower Count (Low to High)</option>
    <option value="Random" {% if order_by =="Random" %} selected {% endif %}>Random</option>
  </select>
  <!-- 不需要提交按钮了，直接删掉或者隐藏 -->
  <!-- <input class="btn btn-primary btn-sm" type="submit" value="Order" style="display:none;"> -->
</form>

原理：onchange事件会在用户选中新选项时触发，调用JavaScript的submit()方法直接提交表单，跳过手动点击按钮的步骤。

2. 修正Flask路由逻辑 #

你的原路由里有个小bug：POST请求时排序后的结果存在curators变量，但返回模板时用的是初始的results，导致排序后的内容不会显示。修改如下：

@app.route("/results", methods=["GET", "POST"])
@login_required
def results():
    order_by = None
    # 初始加载用默认排序
    results = get_results(order_by)
    if request.method == "POST":
        order_by = request.form["order-by"]
        # 将排序后的结果赋值给results，确保传递给模板的是最新数据
        results = get_results(order_by)
    return render_template("results.html", title="Results", results=results, order_by=order_by)

可选：更规范的JavaScript写法（分离HTML与JS） #

如果你不想用内联onchange（更符合代码分离的规范），可以在页面末尾添加独立的脚本：

<script>
// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    const orderSelect = document.getElementById('order');
    const orderForm = document.getElementById('order-form');
    
    orderSelect.addEventListener('change', function() {
        orderForm.submit();
    });
});
</script>

这样修改后，用户每次切换下拉选项，页面就会自动向Flask发送POST请求，加载对应排序后的结果啦。

内容的提问来源于stack exchange，提问作者Adventure-Knorrig