Not getting response while ajax call in jQuery Data table

Question

I tried ajax call in separate page it's working fine but through jQuery data table I'm not getting response.

API is in AWS. I tried though API end point with key.

Problem is while trying ajax request in jQuery data table the request payload not send properly it shows an encryption data and also not return any response.

Sample code as given below:

var dataListNew = { "fromDate": "2021-01-01", "toDate": "2021-01-14"};

$('#co-table').DataTable({          
        //"scrollY": "400px",
         dom: 'Bfrtip',
         buttons: [
                    {
                        extend:    'copyHtml5',
                        text:      '<i class="fa fa-files-o"></i>',
                        titleAttr: 'Copy'
                    },
                    {
                        extend:    'excelHtml5',
                        text:      '<i class="fa fa-file-excel-o"></i>',
                        titleAttr: 'Excel'
                    },
                    {
                        extend:    'csvHtml5',
                        text:      '<i class="fa fa-file-text-o"></i>',
                        titleAttr: 'CSV'
                    },
                    {
                        extend: 'pdfHtml5',
                        orientation: 'landscape',
                        //pageSize: 'LEGAL',
                        text:      '<i class="fa fa-file-pdf-o"></i>',
                        titleAttr: 'PDF'
                    },
                    {
                        extend:    'print',
                        text:      '<i class="fa fa-print"></i>',
                        titleAttr: 'Print'
                    }
                ],                  
                            
        "ajax": {
             url         : applicationApiEndPoint+page,
             method      : "POST",
             dataType    : "json",
             data        : JSON.stringify(dataListNew)
             headers    : {
                    "authorizationToken":   authorizationToken,
                    "Cache-Control"     :   "no-cache, no-store",
                    "Content-Type"      :   "application/json; charset=utf-8",
                    "x-api-key"         :   applicationApiKey,
                    "sciappID"          :   appID,
                    "sciappuserID"      :   userID
            }
        },
        
        "columns": [
            { "data": "PROCESSDATE" },
            { "data": "MODELNAME" },
            { "data": "MODELSTARTTIME", 
                render: function (data, type, row)
                {....

[Request Payload][it look like fully encrypted]

Answer 1

You have the following variable containing the object you want to send to the server in your request:

var dataListNew = { "fromDate": "2021-01-01", "toDate": "2021-01-14"}; 

In your DataTables ajax call you are stringifying this variable:

data: JSON.stringify(dataListNew), // note you have a missing comma in your version

But JSON.stringify will cause the JSON object to be converted to a string - and then the data option will try to interpret that string as follows:

When data is passed as a string it should already be encoded using the correct encoding for contentType, which by default is application/x-www-form-urlencoded.

See the jQuery ajax documentation for details.

In your case, the string is not encoded correctly for that to work. Instead, you will get the URL-encoded data you are seeing:

0=%7B&1=%22&2=f&3=r&4=o&5=m&6=D&7=a&8=t&9=e&10=%22&11...

Instead, just pass the JSON object to the ajax data option:

data: dataListNew,

Now, the request payload will be constructed as per the following documentation guidelines:

When data is an object, jQuery generates the data string from the object's key/value pairs...

Now the payload looks like this in the request body:

fromDate=2021-01-01&toDate=2021-01-14

And therefore your server-side PHP logic should be able to read the request body in the usual way.