Flask接收Ajax POST请求返回None，但Ajax请求成功的问题排查

这个问题我碰到过好几次，核心原因是Flask只会在请求的Content-Type头明确为application/json时，才会自动把请求体解析成JSON对象存入request.json。如果没设置这个头，哪怕你用了JSON.stringify处理数据，Flask也不会解析请求体，所以request.json返回None，但请求本身因为HTTP状态码是200，Ajax会显示成功。

下面是具体的修复步骤：

1. 修正Ajax请求：添加正确的请求头 #

不管你用jQuery还是原生JS，都必须在请求里设置Content-Type: application/json，否则Flask无法识别JSON格式的请求体。

示例1：jQuery Ajax #

// 先获取选中的复选框ID数组
const selectedIds = $('#survey-table input[type="checkbox"]:checked')
    .map(function() { return $(this).val(); })
    .get();

$.ajax({
    url: '/surveys',
    method: 'POST',
    contentType: 'application/json',  // 关键：必须设置这个请求头
    data: JSON.stringify(selectedIds),
    dataType: 'json',  // 可选，告诉jQuery期望接收JSON响应
    success: function(response) {
        console.log('提交成功，返回数据:', response);
    },
    error: function(xhr) {
        console.error('提交失败，错误信息:', xhr.responseJSON?.error || '未知错误');
    }
});

示例2：原生JS Fetch #

// 获取选中的复选框ID数组
const selectedIds = Array.from(
    document.querySelectorAll('#survey-table input[type="checkbox"]:checked')
).map(el => el.value);

fetch('/surveys', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',  // 必须设置
    },
    body: JSON.stringify(selectedIds)
})
.then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
})
.then(data => console.log('提交成功:', data))
.catch(err => console.error('提交出错:', err));

2. 优化Flask后端代码 #

用Flask内置的jsonify代替json.dumps，它会自动设置正确的响应头，并且处理JSON序列化更规范，同时建议添加错误处理逻辑：

from flask import Flask, render_template, request, jsonify  # 确保导入jsonify

app = Flask(__name__)

@app.route('/surveys', methods=['POST', 'GET'])
def register_form():
    if request.method == 'GET':
        return render_template('survey_table.html')
    else:
        # 先检查请求是否为JSON格式
        if not request.is_json:
            return jsonify({"error": "请发送JSON格式的请求"}), 400
        
        example = request.json
        # 这里可以添加你的业务逻辑，比如保存选中的ID到数据库等
        print("收到的选中ID数组:", example)
        
        # 用jsonify返回响应，自动处理JSON序列化和响应头
        return jsonify({"status": "success", "data": example})

额外排查点 #

• 确认复选框的value属性确实设置了正确的ID值，不然获取到的数组会是空的或者错误的值
• 打开浏览器开发者工具的「Network」面板，查看POST请求的：
  • Request Headers里是否有Content-Type: application/json
  • Request Body是否是正确的JSON格式（比如["1", "3", "5"]这样的数组）
• 如果你的请求是用FormData提交的，那应该用request.form.getlist()来获取数据，而不是request.json

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