jQuery的load方法传数组到控制器时cities参数为空如何解决

核心错误原因 #

• 参数拼接存在语法错误：&cities[]=" + strCities+ + "&selectFoodType 处多了一个多余的加号，导致查询字符串结构异常
• 数组传参格式不符合ASP.NET Core默认绑定规则：你将整个数组JSON序列化后赋值给单个cities[]参数，而框架接收string[]类型参数时，默认要求查询字符串传递多个同名参数，格式为cities=值1&cities=值2，不需要额外JSON序列化。

推荐解决方案 #

直接使用jQuery的$.param方法自动序列化参数对象，无需手动拼接和编码，避免格式错误，修改后的前端代码如下：

$(function () {
    $('#dish-filter-form').on("submit", function (e) {
        e.preventDefault();

        var reqParams = {
            dishName: $('#dishName').val(),
            cities: ["New-York", "Tokyo", "Madrid"],
            selectFoodType: $('#selectFoodType').val()
        };
        // $.param会自动处理数组序列化、参数编码，生成符合要求的查询字符串
        $('.toLoad').load('/Dishes/Search?' + $.param(reqParams));
    });
});

控制器方法不需要做任何修改，即可正常绑定接收到cities数组参数。

可选方案：保留JSON序列化传参 #

如果你希望继续使用JSON序列化的方式传参，需要修改控制器参数类型，自行反序列化得到数组：

1. 前端调整传参键名，去掉[]后缀，修正多余加号的语法错误：

$('.toLoad').load('/Dishes/Search?dishName=' + encodeURIComponent($('#dishName').val()) + "&cities=" + encodeURIComponent(JSON.stringify(cities)) + "&selectFoodType=" + encodeURIComponent($('#selectFoodType').val()));

2. 控制器方法调整参数类型，手动反序列化：

public async Task<IActionResult> Search(string dishName, string cities, string selectFoodType)
{
    var cityArr = System.Text.Json.JsonSerializer.Deserialize<string[]>(cities);
    // 后续业务逻辑
}

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