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

Posted 2023-05-08

【中文标题】在 jQuery 数据表中调用 ajax 时没有得到响应

【英文标题】：Not getting response while ajax call in jQuery Data table

【发布时间】：2021-04-20 20:02:24

【问题描述】：

我在单独的页面中尝试了 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)
                ....

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

【问题讨论】：

您提到您遇到错误 - 错误是什么？你能edit你的问题吗？

我提到了确切的问题，请检查。

请求负载发送不正确 - 你没有告诉我们dataListNew 数据来自哪里。从原版问题看这个：0=&1="&2=f&3=r&4=o&5=m&6=D&7=a&...，这不是加密数据。它是 HTML 表单数据，从看起来像一个字符数组的地方变成了 URL encoded。如果您对其进行 URL 解码，您可以看到数据中的文本："fromDate":"2021-01-01","toDate":"2021-01-15"...。我不知道你是如何做到这一点的 - 但我会先仔细看看data : JSON.stringify(dataListNew)。

是的，只有我在 dataListNew 变量中发送 fromDate 和 toDate json 对象..我尝试过 postman 以及它的工作正常但是当尝试在 jquery 数据表中它的发送请求有效负载作为 url 编码。例如：看下面的请求负载 var dataListNew = "fromDate": "2019-03-01", "toDate": "2019-03-01";

明白 - 但正如我所提到的，您没有向我们展示 dataListNew 数据的来源。

【参考方案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 逻辑应该能够以通常的方式读取请求正文。

【讨论】：

你问的问题是关于请求负载的：“请求负载没有正确发送”。现在你问的是一个完全不同的问题。

好吧..为什么我没有从服务器端得到响应。

您可以提出您的问题（关于您的 CORS 问题）通过创建一个新的单独问题。换句话说，不要试图将它结合到这个现有的问题中。话虽如此，Stack Overflow 上已经有很多很多 CORS 问题 - 所以请记住在发布新问题之前先研究这些答案。

你能看到我的新问题吗...标题是...在 jQuery 数据表中调用 ajax 时出现 CORS 源错误