使用Ajax从JS客户端向Flask服务端传递数据失败求助

嘿，我来帮你搞定这个问题！你遇到的核心问题是前端传递的数组结构没法被Flask默认的表单解析器正确处理，加上可能没处理按钮的默认行为，导致请求数据异常。下面给你两种靠谱的解决方案，按需选择：

方案一：将数组序列化为JSON字符串传递（兼容表单格式） #

这种方式不需要修改请求的Content-Type，适合需要和其他表单字段混合传递的场景：

前端修改（修正send函数） #

<script>
var dict = []; // 假设这里会被填充数据，比如 dict.push({name: "test", value: 123})
function send(event, action) {
    // 阻止按钮默认的提交/刷新行为，避免中断AJAX请求
    event.preventDefault();
    
    // 将数组转为JSON字符串后传递
    $.post('/submit', { 
        info: JSON.stringify(dict), 
        action: action 
    }).done(function(response) {
        console.log("请求成功！返回数据：", response);
    }).fail(function(error) {
        console.error("请求失败：", error);
    });
}
</script>

后端修改（解析JSON字符串） #

from flask import jsonify, json

@app.route('/submit',methods=['POST'])
def submit():
    # 从表单数据中获取JSON字符串
    info_json = request.form.get('info')
    action = request.form.get('action')
    
    # 校验参数是否存在
    if not info_json or not action:
        return jsonify({"error": "缺少info或action参数"}), 400
    
    # 解析JSON为Python列表/字典
    try:
        info = json.loads(info_json)
    except json.JSONDecodeError:
        return jsonify({"error": "info参数格式错误，需为JSON字符串"}), 400
    
    # 这里写你的业务逻辑
    print("收到的info数据：", info)
    print("收到的action：", action)
    
    return jsonify({"status": "success", "data": {"info": info, "action": action}})

方案二：直接发送JSON格式请求体（更适合复杂数据结构） #

如果你的数据结构比较复杂（比如嵌套数组/字典），直接发送JSON请求体会更简洁：

前端修改（改用$.ajax指定Content-Type） #

<script>
var dict = [];
function send(event, action) {
    event.preventDefault();
    
    $.ajax({
        url: '/submit',
        type: 'POST',
        contentType: 'application/json', // 明确告诉后端请求是JSON格式
        data: JSON.stringify({
            info: dict,
            action: action
        }),
        success: function(response) {
            console.log("请求成功！", response);
        },
        error: function(error) {
            console.error("请求失败：", error);
        }
    });
}
</script>

后端修改（直接解析JSON请求体） #

from flask import jsonify

@app.route('/submit',methods=['POST'])
def submit():
    # 直接解析JSON格式的请求体
    request_data = request.get_json()
    
    # 校验必要参数
    if not request_data or 'info' not in request_data or 'action' not in request_data:
        return jsonify({"error": "缺少必要参数"}), 400
    
    info = request_data['info']
    action = request_data['action']
    
    # 业务逻辑处理
    print("收到的info：", info)
    print("收到的action：", action)
    
    return jsonify({"status": "success", "data": {"info": info, "action": action}})

为什么原来的写法会失败？ #

你之前直接传递数组dict时，jQuery会把它编码成application/x-www-form-urlencoded格式，变成类似info[]=xxx&info[]=yyy的结构。这种格式对于简单数组还能勉强解析，但如果是嵌套结构就完全失效，而且Flask的request.form['info']无法直接获取这种数组格式的值，导致你拿到空数据。

额外提醒 #

1. 先在前端用console.log(dict)确认数组确实有数据，不要是空数组
2. 后端记得导入对应的模块（比如json或确保Flask的request.get_json()功能正常，Flask默认是开启的）
3. 加上参数校验和错误处理，避免因为非法请求导致服务端崩溃

内容的提问来源于stack exchange，提问作者Rackham Le Rouge