ajax.data passed is encoded incorrectly

richepa

Hi,
We are trying to use DataTables with ajax to call an MVC Controller action. Myjavascript is:

                    $('#myTable').DataTable(
                        {
                            ajax:
                            {
                                type: 'post',
                                url: '/api/AirTelemetry/FilteredDeviceLogs2',
                                data: JSON.stringify({ "siteID": "035", "parameterMethod": "" }),
                                contentType: 'application/json',
                                dataType: 'json',
                                dataSrc: '',
                            },
                            columns: [
                                { data: 'sessionID' },
                                { data: 'sampledUTC' },
                                { data: 'sampledLocal' },
                                { data: 'siteId' },
                                { data: 'deviceId' },
                                { data: 'timeBasis' },
                                { data: 'parameter' },
                                { data: 'analysis' },
                                { data: 'value' },
                                { data: 'verificationStatus' }
                            ]
                        });

And the request being sent as shown in Fiddler is:

---

POST https://localhost:44366/api/AirTelemetry/FilteredDeviceLogs HTTP/1.1
Host: localhost:44366
Connection: keep-alive
Content-Length: 200
Accept: application/json, text/javascript, /; q=0.01
Origin: https://localhost:44366
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.80 Safari/537.36
Content-Type: application/json
Referer: https://localhost:44366/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: *truncated

0=%7B&1=%22&2=s&3=i&4=t&5=e&6=I&7=D&8=%22&9=%3A&10=%22&11=0&12=3&13=5&14=%22&15=%2C&16=%22&17=p&18=a&19=r&20=a&21=m&22=e&23=t&24=e&25=r&26=M&27=e&28=t&29=h&30=o&31=d&32=%22&33=%3A&34=%22&35=%22&36=%7D

---

So the payload is being encoded in some way, resulting in a 400 - Bad Request from the server.
I have tried every combination of data: JSON.stringify({ "siteID": "035", "parameterMethod": "" }), ** I can think of, and every combination of **contentType: 'application/json',

The following code (vanilla JQuery post) works fine:

                    $.post({
                        url: '/api/AirTelemetry/FilteredDeviceLogs',
                        data: JSON.stringify({ "siteID": "035", "parameterMethod": "" }),
                        //data: { "SiteId": "035", "ParameterMethod": "" },
                        contentType: 'application/json',
                    })
                        .done(function (a, b, c) {
                            console.log("Passed");
                        })
                        .fail(function () {
                            console.log("Failed");
                        });

Has anyone encountered this?

allan

Could you try this please:

data: function () {
  return JSON.stringify({ "siteID": "035", "parameterMethod": "" });
},

in your ajax object. I suspect DataTables isn't handling the string data correctly, but it will accept a string return from ajax.data as a function.

Regards,
Allan