jQuery $.AJAX 替换为 JavaScript fetch - mvc4 方法 arguments 总是 null

Question

We had a working jQuery script which calls an MVC4 C# controller method like this:

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

Now we want to replace this $.ajax call to a native fetch(...) call like this (and use a 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) );

We have problems, and somehow we cannot find the answers:

• using GET we cannot attach body parameters (I see that the html GET and POST calls are quite different, but the $.ajax somehow resolved this problem)
• we changed the GET to POST but the controller method still got "null"-s in the parameters
• we changed the fetch call to "body: JSON.stringify(myData)" but the method still gots null
• we constructed a temp class with the 2 properties, changed the method parameters as well - but the properties still contains null
• we added to the [FromBody] attribute before the method class parameter but it got still nulls
• we replace body: JSON.stringify(myData) to body: myData - still the same

Note: we tried this in Firefox and Chrome, the code is MVC5, C#, .NET Framework 4.5 (not.CORE.) hosted by IIS.

We changed the javascript call as the following (and everything works again):

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

So: what do we wrong? what is the information we do not know, do not understand about fetch? How to replace $.ajax to fetch in this situation correctly? can it works with GET again? how to modify the controller method to receive the arguments?

Answer 1

GET requests do not have a BODY, they have querystring parameters. Using URLSearchParams makes it easy

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

Other way of building the URL

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

If you were planning on sending JSON to the server with a post request

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