如何用JavaScript和AJAX向FastAPI提交数据？解决请求体报错

FastAPI的Item模型要求请求体是JSON格式（application/json），但你用jQuery的$.ajax时，默认会把data中的对象编码成application/x-www-form-urlencoded格式（类似表单提交的格式）发送，后端无法将这种格式解析为字典类型的请求体，所以抛出value is not a valid dict错误。而Swagger UI默认会发送JSON格式的请求，所以能正常响应。

修改AJAX请求的两个关键配置：

• 添加contentType: "application/json"，明确告诉后端发送的是JSON数据
• 用JSON.stringify()把要发送的对象转为JSON字符串，替换原来的data值

修改后的AJAX代码如下：

$("#request_body_param").click(function(){
    console.log('request_body_param pushed')

    const postData = {
        id: 123,
        name: "John",
        description: "I am a description"
    };

    $.ajax({
        url: "http://127.0.0.1:8000/items_via_request_body",
        type: "POST",
        data: JSON.stringify(postData), // 转为JSON字符串
        contentType: "application/json", // 指定内容类型
        dataType: "json",
        success: function(data){
            $("#content").html(JSON.stringify(data));
            console.log("SUCCESS: " + JSON.stringify(data));
        },
        error: function(data){
            $("#content").html("Failed to load data. " + JSON.stringify(data));
            console.log("ERROR: " + JSON.stringify(data));
        },
        complete: function(data){
            console.log("COMPLETED: " + JSON.stringify(data));
        },
    });
});

修改后点击按钮，请求会以JSON格式发送到后端，FastAPI就能正确解析Item模型，返回{"Hello": "World"}，控制台会打印成功日志。

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