Ajax向Flask发送POST请求返回400错误、接收空字典问题排查

传参失败是两个核心问题叠加导致的：

• 使用jQuery的$.ajax发请求时，就算手动设置了contentType: 'application/json'，只要data字段传入的是原生JS对象，jQuery就不会按JSON格式发送数据，而是默认把对象转成application/x-www-form-urlencoded格式的表单字符串塞到请求体里。这种情况下Flask解析不到合法JSON内容，request.json会直接返回None，强行访问request.json['data']必然抛出异常进入错误分支。
• 后续修改为data: {'data': posi}时仅调整了传入的对象结构，没有做JSON序列化处理，本质问题没有解决，依然会拿到空值。

前端代码修改 #

必须用JSON.stringify()把要传递的对象转成标准JSON字符串再发送，和后端取值逻辑对齐，直接替换success函数内的Ajax配置即可：

function success(pos){
    const posi = {
        lat: pos.coords.latitude,
        lng: pos.coords.longitude
    };
    alert(posi.lat)
    $.ajax({
        method: "POST",
        url: "/",
        // 序列化JSON，外层包data字段匹配后端的取值key
        data: JSON.stringify({data: posi}),
        contentType: 'application/json',
        success: function(result) {
            alert("yay");
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Status: " + textStatus);
            alert("Error: " + errorThrown);
        }
    });
}

后端容错优化（建议添加） #

原有写法没有做合法性校验，只要请求格式不符合预期就会直接抛异常，可以增加判断提升稳定性：

from flask import Flask, render_template, request

app = Flask(__name__, template_folder='templates')


@app.route('/', methods=["GET"])
def index():
    return render_template("index.html")


@app.route('/', methods=["POST"])
def post():
    data = {}
    # 先校验请求是否为合法JSON格式，再提取对应字段
    if request.is_json:
        req_params = request.get_json()
        data = req_params.get('data', {})
        print("接收到定位数据：", data)
    return data


if __name__ == "__main__":
    app.run(debug=True)

修改完成后清空浏览器缓存，重启Flask服务再触发定位请求：

• 打开浏览器开发者工具的网络面板，查看对应POST请求的载荷内容，应该为标准JSON结构：{"data":{"lat":xxx,"lng":xxx}}
• 后端控制台会正常打印经纬度数值，不会再抛出KeyError异常
• 前端会弹出成功提示，接口返回对应定位数据而非空字典

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