级联下拉菜单数据加载异常：两种请求方式问题排查与解决

一、Fetch 方式：json.Projects 返回 undefined 的问题 #

问题根源 #

1. 大小写不匹配：C# 默认 JSON 序列化（无论是 Newtonsoft.Json 还是 System.Text.Json）会把类的 PascalCase 属性转为 camelCase。如果后端模型的属性是Projects（大写P），序列化后会变成projects（小写p），前端用json.Projects访问自然拿不到值。
2. 响应结构不符：可能后端直接返回的是Projects数组本身，而非包含Projects属性的对象。比如后端写的是return Json(model.Projects);而非return Json(new { Projects = model.Projects });，此时前端拿到的就是纯数组，根本没有Projects属性。

解决步骤 #

1. 先看实际响应内容：打开浏览器开发者工具的「网络」面板，找到该请求，查看响应体的真实结构：
   • 如果响应是[{"id":1,"name":"项目1"},...]（直接是数组），前端代码改成：

     .then(json => {
         console.log('data:', json);
         PopulateDropDown("#subdropdown1", json)
     })
     

   • 如果响应是{"projects":[{"id":1,"name":"项目1"},...]}（小写p），前端改成：

     .then(json => {
         console.log('data:', json.projects);
         PopulateDropDown("#subdropdown1", json.projects)
     })
     

2. （可选）统一后端序列化规则：要是想让前端保持用Projects（大写），可以修改后端配置强制保留PascalCase。ASP.NET Core 中可以这么改：

   // Program.cs
   builder.Services.AddControllers()
       .AddJsonOptions(options =>
       {
           options.JsonSerializerOptions.PropertyNamingPolicy = null; // 禁用 camelCase 转换
       });
   

二、jQuery Ajax 触发 Illegal Invocation 错误 #

问题根源 #

你用了new URLSearchParams()作为data参数，但 jQuery Ajax 不支持直接传入URLSearchParams对象——它只认普通JavaScript对象或者URL编码的字符串，直接传就会触发非法调用错误。

解决步骤 #

两种方案任选其一：

方案1：改用普通对象传参

$("#dropdown").change(function () {
   var valueId = $(this).val();
   var name = $(this).attr("id");
   // 换成普通对象
   var data = {
       type: name,
       id: valueId
   };
   $.ajax({
       url: "@Url.Action("CascadeDropDowns", "Home")",
       data: data,
       type: "POST",
       contentType: "application/x-www-form-urlencoded;charset=UTF-8",
       success: function (data) {
           console.log(data);
           // 同样注意响应结构，参考fetch部分的判断
           PopulateDropDown("#subdropdown1", data.projects || data);
       },
       error: function (r) {
           console.log(r.responseText);
       }
   });
});

方案2：把URLSearchParams转为字符串

$("#dropdown").change(function () {
   var valueId = $(this).val();
   var name = $(this).attr("id");
   let data = new URLSearchParams();
   data.append("type", name);
   data.append("id", valueId);
   $.ajax({
       url: "@Url.Action("CascadeDropDowns", "Home")",
       data: data.toString(), // 转为URL编码字符串
       type: "POST",
       contentType: "application/x-www-form-urlencoded;charset=UTF-8",
       success: function (data) {
           console.log(data);
           PopulateDropDown("#subdropdown1", data.projects || data);
       },
       error: function (r) {
           console.log(r.responseText);
       }
   });
});

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