通过jQuery Ajax向WebMethod传递二维数组时参数为空的问题排查

嘿，这个问题的核心是前后端的数据结构不匹配，加上前端传参时的一个小错误，导致后端接收不到数据。我来一步步帮你修正：

1. 前端传参的关键错误 #

你当前的Ajax请求中，data部分的写法把数组多包了一层冗余结构：

data: '{pPayments: ' + JSON.stringify({ payments: payments }) + '}'

这会生成类似这样的JSON：

{"pPayments": {"payments": [["td1","td2","td3","td4"], ["td1","td2","td3","td4"]]}}

但你的后端WebMethod期望pPayments直接是一个数组，而不是包含payments属性的对象。所以首先要修正前端的data写法，直接把payments数组传给pPayments参数：

data: JSON.stringify({ pPayments: payments })

这样生成的JSON才是后端需要的结构：

{"pPayments": [["td1","td2","td3","td4"], ["td1","td2","td3","td4"]]}

2. 后端参数类型不匹配 #

你构建的payments是一个二维数组（每个元素是包含4个字符串的数组），但后端的参数是List(Of String)——这是一维的字符串列表，完全不匹配，所以后端接收到的是空列表。

你有两种修正方案：

方案一：修改后端参数为二维列表 #

直接把WebMethod的参数改成List(Of List(Of String))，匹配前端的二维数组结构：

<WebMethod()> _
Public Shared Sub SaveGridViewData(ByVal pPayments As List(Of List(Of String)))
    Dim x As Integer
    x += 1
    ' 现在你可以遍历pPayments，每个元素是一行的4个td值
    For Each row In pPayments
        Dim col1 = row(0)
        Dim col2 = row(1)
        ' ... 处理其他列
    Next
End Sub

方案二：使用自定义实体类（更推荐） #

如果这些列有明确的业务含义（比如付款日期、金额等），创建一个对应的数据类会让代码更清晰易维护：

Public Class PaymentInfo
    Public Property PaymentDate As String
    Public Property Amount As String
    Public Property DueDate As String
    Public Property Status As String
    ' 根据你的实际列名修改属性名
End Class

然后修改WebMethod的参数为这个类的列表：

<WebMethod()> _
Public Shared Sub SaveGridViewData(ByVal pPayments As List(Of PaymentInfo))
    Dim x As Integer
    x += 1
    ' 遍历处理每个PaymentInfo对象
    For Each payment In pPayments
        Dim dateVal = payment.PaymentDate
        Dim amountVal = payment.Amount
        ' ... 业务逻辑处理
    Next
End Sub

同时前端构建数组时，改成对象数组来匹配这个类：

var payments = [];
$('[id*=GridView_PaymentSchedule]').find('tr:has(td)').each(function () {
    payments.push({
        PaymentDate: $(this).find('td').eq(0).html(),
        Amount: $(this).find('td').eq(1).html(),
        DueDate: $(this).find('td').eq(2).html(),
        Status: $(this).find('td').eq(3).html()
    });
});

（这里用.html()替代[0].innerHTML，是jQuery更简洁的写法）

3. 额外的小优化 #

• 前端的payments数组初始化可以更简洁，不用手动维护索引a，直接用push方法即可，像上面的示例那样。
• 避免手动拼接JSON字符串，直接用JSON.stringify处理整个参数对象，减少语法错误的可能。

按照上面的步骤修改后，后端就能正确接收到你从GridView行中提取的数据了！

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