使用abp.libs.datatables.createAjax传中文参数编码异常求助

以下JavaScript代码调用huake.tennis.courts.court.getCourtByAreaName接口时，传入中文参数filterAreaName: "天河体育中心"出现编码异常，参数被错误转为%EF%BF%BD%EF%BF%BD...格式，导致接口无法识别参数。

原代码示例：

$(function () {
    var l = abp.localization.getResource('tennis');
    var createModal = new abp.ModalManager(abp.appPath + 'Courts/CreateModal');
    //var editModal = new abp.ModalManager(abp.appPath + 'Courts/EditModal');

    var dataTable = $('#CourtsTable').DataTable(
        abp.libs.datatables.normalizeConfiguration({
            serverSide: true,
            paging: true,
            order: [[1, "asc"]],
            searching: false,
            scrollX: true,
            ajax: abp.libs.datatables.createAjax(huake.tennis.courts.court.getCourtByAreaName, function () {
                return {filterAreaName: "天河体育中心"};
            }),
            columnDefs: [
                {
                    title: l('AreaName'),
                    data: "areaName"
                },
                {
                    title: l('CourtNo'),
                    data: "courtNo"
                },
                {
                    title: l('IpCameraInnerAddress'),
                    data: "ipCameraInnerAddress"
                }
            ]
        })
    );
});

解决方案 #

1. 手动编码中文参数 #

在返回请求参数时，使用encodeURIComponent对中文进行标准UTF-8编码，确保参数传递过程中编码不丢失：

ajax: abp.libs.datatables.createAjax(huake.tennis.courts.court.getCourtByAreaName, function () {
    return {filterAreaName: encodeURIComponent("天河体育中心")};
}),

注意：后端接口需确保使用UTF-8解码参数（ABP框架后端默认支持，若有自定义配置需检查）。

2. 改用POST请求传递参数 #

GET请求受URL编码限制易出现中文问题，改为POST请求并以JSON格式传递参数：

ajax: {
    url: abp.appPath + 'api/tennis/courts/court/getCourtByAreaName',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: function() {
        return JSON.stringify({
            filterAreaName: "天河体育中心",
            sorting: "courtNo asc",
            skipCount: dataTable.page.info().start,
            maxResultCount: dataTable.page.info().length
        });
    },
    dataSrc: function(response) {
        return response.result.items;
    }
},

配套调整：后端接口需修改为接收POST请求，使用[FromBody]特性绑定JSON参数。

3. 配置ABP全局Ajax编码规则 #

在页面初始化时添加全局配置，确保所有ABP Ajax请求使用UTF-8编码：

abp.ajax.defaults.headers['Content-Type'] = 'application/json; charset=utf-8';
abp.ajax.defaults.responseType = 'json';

4. 检查后端编码配置 #

在ASP.NET Core后端的Program.cs中添加请求本地化配置，强制使用UTF-8编码：

app.UseRequestLocalization(new RequestLocalizationOptions
{
    DefaultRequestCulture = new RequestCulture("zh-CN"),
    SupportedCultures = new List<CultureInfo> { new CultureInfo("zh-CN") },
    SupportedUICultures = new List<CultureInfo> { new CultureInfo("zh-CN") }
});

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