将select2多选选中值数组传递给Flask时获取hr为None的原因是什么？

• 请求方法与参数获取方式不匹配：前端使用$.getJSON发起的是GET请求，但Flask路由仅允许POST请求，且后端使用request.args只能获取GET请求的查询参数，和你定义的POST路由完全不匹配。
• jQuery数组序列化格式不兼容：jQuery默认传递数组时会将参数序列化为selected_HR[0][value]这类带索引的格式，Flask原生的request.args.get无法直接识别这类格式，所以拿到的结果为None。
• select2取值写法不规范：$("#searchHR:selected")是错误的选择器语法，:selected伪类只能作用于option元素，你现在的遍历写法属于凑巧拿到值，后续维护很容易出问题，select2多选组件直接调用.val()就可以直接返回选中值的数组，不需要手动遍历。
• 序列化后未对应解析：如果你直接将数组序列化为JSON字符串传递，后端没有执行反序列化操作的话，也无法正常拿到参数值。

这里提供两种常用的落地方案，按需选择即可：

方案1：POST传JSON（推荐，适合参数复杂的场景） #

修正后前端代码 #

function loader() {
    // 直接用val()获取select2多选的选中数组
    const selectedValues = $('#searchHR').val();
    const selectedProject = $('#searchProject').val();
    console.log(selectedValues);

    $.ajax({
        url: '/query_values',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            selected_HR: selectedValues,
            selected_project: selectedProject
        }),
        success: function(res) {
            console.log('后端返回结果', res);
        }
    })
}

修正后Flask代码 #

from flask import request, jsonify

@app.route('/query_values', methods=['POST'])
def query_values():
    # 解析JSON格式的请求体
    req_data = request.get_json()
    project = req_data.get('selected_project')
    hr = req_data.get('selected_HR')
    print(hr)
    # 用jsonify返回标准JSON响应
    return jsonify({
        "project": project,
        "hr": hr
    })

方案2：GET请求传参（适合简单参数场景） #

修正后前端代码 #

function loader() {
    const selectedValues = $('#searchHR').val();
    console.log(selectedValues);

    $.getJSON('/query_values', {
        selected_HR: selectedValues,
        selected_project: $('#searchProject').val(),
    }, function(res) {
        console.log('后端返回结果', res);
    })
}

修正后Flask代码 #

from flask import request, jsonify

# 路由添加GET方法支持
@app.route('/query_values', methods=['GET'])
def query_values():
    project = request.args.get('selected_project', type=str)
    # 数组参数用getlist方法获取
    hr = request.args.getlist('selected_HR[]')
    print(hr)
    return jsonify({
        "project": project,
        "hr": hr
    })

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