MVC4/5中jQuery $.ajax替换为原生fetch后控制器参数始终为null如何解决

核心错误点 #

• 低级错误：函数名拼写不一致，定义的是startAjaxHtmlCall，调用时写为starAjaxCall，少了字符t导致函数调用失败。
• GET请求违规使用body：fetch严格遵循HTTP规范，GET请求不允许携带body参数，浏览器会直接忽略或抛出错误。之前jQuery的$.ajax做了兼容处理，GET请求下传入的data会被自动转为查询字符串拼接到URL末尾，根本没有走body传输，这是和fetch最大的行为差异。
• POST请求未处理数据格式与请求头：fetch不会像$.ajax一样自动对传入的data做序列化、自动匹配Content-Type，未配置正确的请求头和序列化规则时，MVC5的模型绑定器无法识别请求内容，导致参数全为null。
• 对MVC5模型绑定规则不熟悉：简单类型（string、int等）参数默认从查询字符串、路由数据、表单数据中取值，只有复杂类型会默认读取body，加[FromBody]特性后才会强制从body读取参数，且格式必须和请求的Content-Type匹配。

正确实现方案 #

方案1：继续使用GET请求（无需修改控制器） #

GET请求参数必须放在URL的查询字符串中，fetch写法如下：

function startAjaxHtmlCall(url, params) {
    // 将参数序列化为查询字符串拼接到URL后
    const queryStr = new URLSearchParams(params).toString();
    const fullUrl = `${url}?${queryStr}`;
    return fetch(fullUrl, {
        method: "GET",
        credentials: "include" // 若需要携带Cookie认证必须加，jQuery默认携带，fetch默认不携带
    }).then(resp => {
        if (!resp.ok) throw new Error(`请求失败，状态码：${resp.status}`);
        return resp.text();
    });
}

// 调用示例
startAjaxHtmlCall(ourUrl, myData).then(resp => processAjaxHtml(resp));

控制器无需做任何修改，和原有逻辑完全兼容。

方案2：使用POST请求（保持原有控制器逻辑不变） #

和jQuery默认POST行为一致，使用application/x-www-form-urlencoded格式传参：

function startAjaxHtmlCall(url, data) {
    // 将参数转为urlencoded格式，fetch会自动设置对应的Content-Type请求头
    const postData = new URLSearchParams(data);
    return fetch(url, {
        method: "POST",
        body: postData,
        credentials: "include" // 按需添加，需要携带Cookie时必须配置
    }).then(resp => {
        if (!resp.ok) throw new Error(`请求失败，状态码：${resp.status}`);
        return resp.text();
    });
}

控制器保持原有写法即可：

public ActionResult MyMethod(String text, String number) 
{
    // 原有逻辑完全不变
}

方案3：POST传JSON格式（需要修改控制器） #

如果需要传JSON格式，需要同步调整控制器逻辑：

JS代码

function startAjaxHtmlCall(url, data) {
    return fetch(url, {
        method: "POST",
        headers: {
            "Content-Type": "application/json; charset=utf-8"
        },
        body: JSON.stringify(data),
        credentials: "include" // 按需添加
    }).then(resp => {
        if (!resp.ok) throw new Error(`请求失败，状态码：${resp.status}`);
        return resp.text();
    });
}

控制器代码

// 先定义参数接收模型
public class MyMethodReqModel 
{
    public string text { get; set; }
    public string number { get; set; }
}

// 控制器方法加[FromBody]特性绑定JSON内容
public ActionResult MyMethod([FromBody] MyMethodReqModel req) 
{
    string text = req.text;
    string number = req.number;
    // 后续逻辑不变
}

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