使用XMLHttpRequest调用Flask路由时request.form.get返回None求助

核心问题：点击按钮触发XMLHttpRequest请求时，没有将表单数据传递给后端，导致request.form.get('instanceid')返回None。以下是具体错误点和修正方案：

错误点分析 #

• XMLHttpRequest未携带表单数据：当前req.send()没有传递任何参数，后端自然接收不到表单里的instanceid字段值。
• 不必要的表单编码类型：表单设置了enctype="multipart/form-data"，但场景中无文件上传需求，该类型会增加数据处理复杂度，普通表单用默认的application/x-www-form-urlencoded即可。
• HTML语法错误：<option>标签末尾存在多余引号（</option>"），属于无效语法，虽不影响功能但需修正。

修正方案 #

1. 修正JS代码：传递表单数据 #

使用FormData对象收集表单数据，再通过XMLHttpRequest发送：

<script type="text/javascript">
    function loadver() {
        const req = new XMLHttpRequest();
        req.onload = function() {
            document.getElementById('version').innerHTML = this.responseText;
        }
        req.open('POST', '/patchversion', true);
        // 收集表单数据
        const form = document.querySelector('form');
        const formData = new FormData(form);
        req.send(formData);
    }
</script>

2. 修正HTML代码：移除多余语法和不必要的enctype #

<form method="post">
       <label for="tname">Enter Task Name</label>
       <input type="text" id="tname" name="taskname" placeholder="Request Name">
   
       <label for="Instance">Choose Instance</label>
       <select id="instanceid" name="instanceid">
           {% for instance in instanceid %}
           <option value="{{instance}}" SELECTED>{{instance}}</option>
           {% endfor %}
       </select>
       ...
       <button class="sidebyside" type="button" onclick="loadver()">Check Version!</button>   
       ...
     </form>

3. Flask后端代码（优化请求方法判断） #

@app.route('/patchversion', methods = ['POST','GET'])
def check_version():
    if request.method == 'POST':
        instance = request.form.get('instanceid')
        print(instance)  # 现在可以正确获取选中的instanceid值
        version = f'Current Installed Patch for {instance}: 23C'
        return version
    return "Invalid request method"

额外说明 #

如果确实需要处理文件上传，保留enctype="multipart/form-data"即可，Flask的request.form依然可以读取普通表单字段，文件则用request.files处理。

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