如何修改代码实现ReportViewer同时展示SI与DR类型数据？

我想通过JSON数据在ReportViewer中展示特定数据，目前点击事件里选择SI或DR时都能正常展示对应数据，但想实现第三个条件——同时展示SI和DR的数据，请问我写的代码可行吗？刚接触JSON，求建议和技巧。

点击事件初始代码 #

$(".btnViewReport").click(function () {
        const searchOption = $("input[name=searchBy]:checked").val();
        const account =  $("#ddlAccounts").val();
        const status = $("#ddlInvoiceStatus").val();
        const invoice = $("#ddlInvoiceType").val();
        const dateFrom = $("#txtStartDate").val();
        const dateTo = $("#txtEndDate").val();
        const searchTerm = $("#txtSearchTerm").val();

        if (invoice == "DR") {
            var obj = {
                searchOption: searchOption,
                account: account,
                status: status,
                invoice: "DR",
                dateFrom: dateFrom,
                dateTo: dateTo,
                searchTerm: searchTerm
            }
        }
        else if (invoice == "SI") {
            var obj = {
                searchOption: searchOption,
                account: account,
                status: status,
                invoice: "SI",
                dateFrom: dateFrom,
                dateTo: dateTo,
                searchTerm: searchTerm
            }
        }

尝试实现同时展示SI和DR的代码 #

else {
            var obj = {
                searchOption: searchOption,
                account: account,
                status: status,
                invoice: ["SI","DR"],
                dateFrom: dateFrom,
                dateTo: dateTo,
                searchTerm: searchTerm
            } 
        }

        viewReport(obj);
    });

viewReport函数代码 #

function viewReport(obj) {
    showLoader("Loading...");

    $.ajax({
        url: '/reports/sales/customer/viewCompanySummary',
        method: 'GET',
        data: {
            SearchOption: obj.searchOption,
            Account: obj.account,
            InvoiceStatus: obj.status,
            InvoiceType: obj.invoice,
            DateFrom: obj.dateFrom,
            DateTo: obj.dateTo,
            SearchTerm: obj.searchTerm
        },
        dataType: 'html',
    }).done(function (resp) {
        $("#reportHolder").html(resp);
        swal.close();
    }).fail(function (err) {
        console.log(err)
    });
}

代码可行性分析 #

你当前的前端写法逻辑上没问题，但核心取决于后端接口/reports/sales/customer/viewCompanySummary是否支持接收数组类型的InvoiceType参数：

• 选择SI/DR时传的是字符串，后端能正常解析；
• 传数组["SI","DR"]时，GET请求默认会把参数转成InvoiceType=SI&InvoiceType=DR的格式，后端需要能正确识别这种多参数形式，或者你需要提前把数组转成后端能识别的格式（比如逗号拼接的字符串"SI,DR"）。

优化建议与技巧 #

1. 简化重复代码：避免多次重复创建obj对象，先初始化基础结构再修改字段：

// 先创建基础对象
var obj = {
    searchOption: searchOption,
    account: account,
    status: status,
    dateFrom: dateFrom,
    dateTo: dateTo,
    searchTerm: searchTerm
};
// 再根据invoice设置对应值
if (invoice == "DR") {
    obj.invoice = "DR";
} else if (invoice == "SI") {
    obj.invoice = "SI";
} else {
    obj.invoice = ["SI","DR"]; // 或者转成字符串"SI,DR"，看后端要求
}

2. 处理GET请求数组参数问题：

   • 如果后端支持多值参数，jQuery会自动把数组转成InvoiceType=SI&InvoiceType=DR，后端需解析同名多参数；
   • 如果后端只接受字符串，把数组转成逗号分隔格式：obj.invoice = "SI,DR"，后端再拆分字符串处理；
   • 也可以改用POST请求，更适合传递复杂数据：把method: 'GET'改成method: 'POST'，添加contentType: 'application/json'，用JSON.stringify(obj)传递数据。

3. 调试技巧：

   • 打开浏览器开发者工具（F12），在Network标签查看请求参数，确认传递给后端的InvoiceType格式是否符合要求；
   • 请求失败时，查看Console错误信息，或在后端打印接收的参数，排查格式问题。

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