在 jQuery 数据表中调用 ajax 时没有得到响应

Question

我在单独的页面中尝试了 ajax 调用，它工作正常，但通过 jQuery 数据表我没有得到响应。

API 在 AWS 中。我尝试了使用密钥的 API 端点。

问题是在 jQuery 数据表中尝试 ajax 请求时，请求有效负载未正确发送，它显示加密数据并且也不返回任何响应。

示例代码如下：

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)
                {....

[请求有效负载][看起来完全加密]

Answer 1

您有以下变量，其中包含您要在请求中发送到服务器的对象：

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

在您的 DataTables ajax 调用中，您正在对该变量进行字符串化：

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

但JSON.stringify 会导致 JSON 对象转换为字符串 - 然后data 选项将尝试按如下方式解释该字符串：

当数据作为字符串传递时，它应该已经使用正确的 contentType 编码进行编码，默认情况下是 application/x-www-form-urlencoded。

详情请参阅jQuery ajax documentation。

在您的情况下，该字符串未正确编码以使其正常工作。相反，您将获得您所看到的 URL 编码数据：

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

相反，只需将 JSON 对象传递给 ajax data 选项：

data: dataListNew,

现在，请求负载将按照以下文档指南构建：

当 data 是一个对象时，jQuery 从对象的键/值对生成数据字符串...

现在负载在请求正文中如下所示：

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

因此，您的服务器端 PHP 逻辑应该能够以通常的方式读取请求正文。