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

Question

我们有一个有效的 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
我们将获取调用更改为“body: JSON.stringify(myData)”，但该方法仍然为 null
我们构建了一个具有 2 个属性的临时 class，也更改了方法参数 - 但属性仍然包含 null
我们在方法 class 参数之前添加了 [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 一起使用吗？如何修改控制器方法接收参数？

Answer 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)
});

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

jQuery $.AJAX to replace with JavaScript fetch - mvc4 method arguments are always null

javascript

asp.net-mvc

jquery

fetch

promise