jQuery $.AJAX 替换为 JavaScript fetch - mvc4 方法参数始终为空

Posted 2023-05-08

【中文标题】jQuery $.AJAX 替换为 JavaScript fetch - mvc4 方法参数始终为空

【英文标题】：jQuery $.AJAX to replace with JavaScript fetch - mvc4 method arguments are always null

【发布时间】：2021-10-24 17:11:54

【问题描述】：

我们有一个有效的 jQuery 脚本，它调用 MVC4 C# 控制器方法，如下所示：

// C# controller method
public ActionResult MyMethod(String text, String number) 

    ... do something ...
    ... returns a partial view html result ...


// javascript call
var myData =  text:"something", number: "12" ;
$.ajax( url:ourUrl, type:"GET", data: myData, 
       success: function(data)  processAjaxHtml( data ));

现在我们想将这个 $.ajax 调用替换为这样的原生 fetch(...) 调用（并使用 Promise）：

function startAjaxHtmlCall(url) 
     var result = fetch( url, method: "GET", body: myData);
     return result.then( function(resp)  return resp.text(); );

starAjaxCall(ourUrl).then( resp => processAjaxHtml(resp) );

我们遇到了问题，不知怎么地找不到答案：

使用 GET 我们无法附加正文参数（我看到 html GET 和 POST 调用完全不同，但 $.ajax 以某种方式解决了这个问题） 我们将 GET 更改为 POST，但控制器方法的参数中仍然有“null”-s 我们将 fetch 调用更改为“body: JSON.stringify(myData)”，但该方法仍然为空 我们构造了一个带有 2 个属性的临时类，也更改了方法参数 - 但属性仍然包含 null 我们在方法类参数之前添加了 [FromBody] 属性，但它仍然为空 我们将 body: JSON.stringify(myData) 替换为 body: myData - 还是一样

注意：我们在 Firefox 和 Chrome 中尝试过，代码是 IIS 托管的 MVC5、C#、.NET Framework 4.5（不是 .CORE！）。

我们将 javascript 调用更改为如下（一切正常）：

var promise = new Promise((resolve, reject) => 
$.ajax(
        url: url,
        method: method,
        data: myData,
        success: function(data)  resolve(data); ,
        error: function(error)  reject(error); ,
    );
);

return promise;
    // note: .then( function(resp)  return resp.text(); ) // needs no more

那么：我们做错了什么？什么是我们不知道，不了解 fetch 的信息？如何替换 $.ajax 在这种情况下正确获取？它可以再次与 GET 一起使用吗？如何修改控制器方法来接收参数？

【问题讨论】：

嗯，GET 没有正文

你能显示 urlParams 吗？

哦，对不起，我的错误，那里的 myData 也是一样的。已编辑。

【参考方案1】：

GET 请求没有 BODY，它们有查询字符串参数。使用URLSearchParams 很容易

var myData =  text:"something", number: "12" ;
return fetch('https://example.com?' + new URLSearchParams(myData))
    .then( function(resp)  return resp.text(); )

构建 URL 的其他方式

const url = new URL('https://example.com');
url.search = new URLSearchParams(myData).toString();
return fetch(url)...

如果您打算通过 post 请求将 JSON 发送到服务器

fetch('https://example.com', 
  method: 'POST',
  headers: 
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  ,
  body: JSON.stringify(myData)
);

【讨论】：

正如整体陈述本身没有错的补充一样：GET 请求可以有一个主体（至少从规范的角度来看），但添加没有任何意义一，因为它对于GET 请求没有任何语义意义。在最好的情况下，body 将被忽略，在最坏的情况下，请求将被拒绝。

你完全正确！添加 'Content-Type': 'application/json' 作为标题和 stringify() 一起作为一个魅力！谢谢！ :)

作为一个简单的问题：当“url”已经包含任何？部分 const url = 新 URL('example.com?id=12'); - 那么这两种构造方法都不好。您能提出更好的解决方案吗？！谢谢！

看起来很奇怪，您将它们混合在一起，id: 12 从一开始就不会出现在对象中。但是https://example.com?id=12&' + new URLSearchParams(myData) 工作得很好.....

我不确定“url”是否已经不包含任何 ?id=12 部分。一般方法一定要检查一下。其他问题，当 url 在 MVC cshtml 中生成为 @Url.Action("myMethod","myController") 那么它不包含任何 server 部分 - 所以新的 URL(url) 不会接受它:( 似乎没那么容易:(