使用Ajax提交创建用户请求时Web API接收参数始终为null的问题

该问题由三个环节的错误叠加导致，逐一拆解说明：

1. 前端对象定义存在语法错误 #

原代码中定义user对象的写法不符合JS对象字面量语法：

// 错误写法：对象字面量需用冒号分隔键与值，不能使用等号
var user = {
    name="myname",
    id= 1
};

这种写法执行时并不会生成预期的键值对结构，反而会在当前作用域先后完成两次全局赋值：将字符串"myname"赋值给name变量、将数字1赋值给id变量，最终生成的user实例为无自定义属性的空对象，和预期结构完全不符。你调试时console.log能看到输出，本质上是作用域污染带来的假象，并不是user对象真的包含了你预期的name、id属性。
正确写法：

var user = {
    name: "myname",
    id: 1
};

2. Ajax请求序列化格式与后端不匹配 #

jQuery的$.ajax默认会将传入的data参数按application/x-www-form-urlencoded格式做表单序列化，若直接传入嵌套结构{userRequest: user}，最终发送到服务端的报文会被编码为userRequest%5Bname%5D=myname&userRequest%5Bid%5D=1，和后端期望的CreateRequest模型结构无法匹配：后端模型绑定默认会查找与CreateRequest属性同名的顶层字段，多嵌套一层userRequest结构时，字段匹配失败就会返回null。
若后端接口约定从请求体读取JSON格式数据，需要手动配置两个关键请求参数：

• 将JS对象手动序列化为JSON字符串，避免jQuery默认执行表单序列化
• 显式将请求头Content-Type设置为application/json，告知后端按JSON格式解析请求体

3. 后端模型绑定的结构不匹配 #

若后端接口写法为Create([FromBody] CreateRequest userRequest)，前端发送的JSON结构必须和CreateRequest的属性结构完全一致，不能额外包裹一层userRequest字段——否则后端解析JSON时，会试图从JSON的userRequest节点下查找CreateRequest的属性，自然无法匹配到顶层的name、id字段，最终得到null结果。

修正后的完整前端参考代码：

$(document).on("click", "#btncreate", function () {
    // 按规范定义请求参数对象
    var user = {
        name: "myname",
        id: 1
    };
    console.log(user);
    $.ajax({
        url: "https://localhost:44344/api/user/create",
        type: "POST",
        // 直接序列化目标参数对象，不额外嵌套userRequest层
        data: JSON.stringify(user),
        // 显式声明JSON格式的请求头
        contentType: "application/json",
        dataType: 'json',
        success: function (data) {
            console.log(data);
        }
   });
});

快速排查技巧 #

• 打开浏览器开发者工具的Network面板，定位到create接口请求，查看实际发送的原始请求报文，和后端期望的结构做对比，能快速定位序列化环节的问题
• 若业务要求必须保留userRequest的嵌套结构，可对应调整前端发送的JSON结构，同时给后端接口参数加上明确的绑定特性标注，确保模型绑定规则匹配一致

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