jQuery ajax向服务端传数据为何有不同方式？ASP.NET传参不兼容如何处理

问题根源分析 #

• 旧项目使用的是WebForms的[WebMethod]静态页面方法，该机制的解析逻辑是硬编码要求：
  • 请求头必须携带contentType: "application/json; charset=utf-8"
  • 请求体必须是标准JSON字符串，不支持application/x-www-form-urlencoded格式的查询字符串参数，所以你用表单格式传参必然失败
• 你说封装JSON对象后接口还是收不到，基本是以下几个常见错误：
  • 没有手动设置contentType为application/json，jQuery默认会把JS对象序列化为查询字符串格式，contentType也默认是表单类型
  • 手动拼接JSON字符串时格式错误（比如引号不匹配、特殊字符未转义）
  • 参数名/结构和服务端入参不匹配

解决方案 #

方案1：正确调用旧WebForms接口的写法 #

不要手动拼接JSON字符串，用JSON.stringify序列化JS对象，避免格式错误，正确写法如下：

// 先把要传的参数写成普通JS对象
const params = {
    MyParam: MyVar,
    // 多参数直接添加即可，需要和WebMethod的入参名完全对应
    Name1: "value1",
    Name2: "value2"
};
$.ajax({
    type: 'POST',
    url: '<%=Microsoft.AspNet.FriendlyUrls.FriendlyUrl.Resolve("MyPage.aspx/MyAction")%>',
    data: JSON.stringify(params), // 直接序列化即可，不用手动拼接字符串
    contentType: "application/json; charset=utf-8", // 该配置项不能遗漏
    dataType: "json",
    error: function (xhr, textStatus, errMsg) {
        console.log(xhr.responseText);
    },
    success: function (data) {
    // ... 业务逻辑
    }
});

如果服务端WebMethod用Model接收，只要参数名和结构对应即可，比如服务端定义：

public class MyModel 
{
    public string Name1 { get; set; }
    public string Name2 { get; set; }
}

[WebMethod]
public static string MyAction(MyModel MyParam)
{
    // 业务逻辑
}

前端传参时只要外层key和入参名MyParam匹配，内部结构和MyModel对应即可：

const params = {
    MyParam: {
        Name1: "value1",
        Name2: "value2"
    }
};
$.ajax({
    // 其余配置和上面一致
    data: JSON.stringify(params)
})

方案2：新MVC接口兼容两种传参格式的配置 #

如果你希望新写的MVC接口既能接收JSON格式也能接收表单查询字符串格式，无需修改前端调用逻辑，Asp.Net MVC 5及之前版本默认就支持同时解析两种格式的请求，只要参数结构匹配即可；如果是Asp.Net Core版本，给入参同时加上[FromBody]和[FromForm]特性即可适配。

注意事项 #

• 绝对不要手动拼接JSON字符串，特殊字符比如单引号、双引号、换行符会直接导致JSON格式错误，必须用JSON.stringify处理
• 调用WebForms的WebMethod时，参数名必须和服务端入参名严格对应，避免大小写不匹配导致的解析失败

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