jQuery DataTable 在 Document Ready 上返回 JSON答案

【问题标题】：jQuery DataTable returning JSON on Document ReadyjQuery DataTable 在 Document Ready 上返回 JSON
【发布时间】：2016-07-27 15:58:26
【问题描述】：

我正在尝试从 PHP 脚本返回 JSON 以填充 DataTable。

这是名为 'api/exceptions_all.php' 的 PHP 脚本：

 <?php
 $select = "SELECT '', [FOR_PARTNER], [FOR_NAME] FROM [brokerage].[dbo].[for_exceptions]";  

 $query = sqlsrv_query($dbc, $select);

 $out = array();
 while( $row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC) ) 
 {
   $out[] = $row;
 }
 echo json_encode($out);    

 ?>

当我在浏览器中提取文件时，我可以看到 JSON 格式正确：

 [{"":"","FOR_PARTNER":"0000111222","FOR_NAME":"CUSTOMER1 "},{"":"","FOR_PARTNER":"0000333111","FOR_NAME":"CUSTOMER2"}]

这是我试图用来检索 JSON 的 jQuery：

 $(document).ready(function()
 {
   $.ajax({
     type: 'GET', // not sure if I should use POST or GET
     url: 'api/exceptions_all.php',
     dataType: 'json',
     async: false,
     data: data,
     success: function(data)
     {
       console.log(data); // I'm guessing the success is where I should populate the table rows
     },
     fail: function()
     {
       console.log('fail');
     }
   });
 });

这是我最初设置表格的 HTML：

 <table class='table table-bordered display nowrap' id='example1' cellspacing='0' width='100%'>
 <thead>
 <tr>
   <th><!--column used for editing--></th>
   <th>Partner Code</th>
   <th>Partner Name</th>
 </tr>
 </thead>
 <tbody id="tableBody">
 <!-- this is where the datatable rows should be displayed -->
 </tbody>
 </table>

在同一个 HTML 文件的更下方，我格式化了 Datatable（现在我想了想，我不确定我是否需要这个）：

 <script type="text/javascript">
 table = $('#example1').DataTable({
   "iDisplayLength": 25,
   "autoWidth": true,
   "scrollX": true,
   "scrollY": 550,
   "stateSave": true,
   "dataType": "json"
 });
 </script>

完成所有这些后，我收到一个控制台错误，内容如下：

Uncaught ReferenceError: data is not defined

我以前也有过这种情况，但一直无法从中恢复。

【问题讨论】：

data: data, 在您的 jQuery 代码中...也许您想在通过 ajax 发送数据变量之前对其进行初始化，或者如果不需要则根本不包含它

标签： javascript php jquery json datatables

【解决方案1】：

您似乎没有通过 AJAX 将数据传递给您的 PHP 脚本“api/exceptions_all.php”。

所以你的 jQuery 代码中不需要这一行

data: data

删除它，您得到的错误应该消失

【讨论】：

看来你是对的。我能够消除错误。现在我应该能够在成功函数中填充表格。这听起来对吗？
在您的success 函数中，您现在拥有了 php 脚本返回的数据。因此您可以对它们做任何您想做的事情，填充表格等
谢谢您，先生。这对我帮助很大。
用async: false查看我对success函数的评论。

【解决方案2】：

有几件事。正如@GeorgePant 所说，如果您的SQL 中没有WHERE 子句，则不需要data 参数，因为您没有向PHP 脚本传递任何内容。另一件事是，如果您正在进行同步调用（我不会没有充分的理由，特别是如果您这样做只是因为您不知道如何处理异步调用），那么您不要使用 @ 987654323@ 参数。相反，您的数据在 responseText 属性中返回。这采取这种形式：

var x = $.ajax({yadayada}).responseText;

success 是一个内部回调函数，在响应完成时被调用。像这样想。 Synchronous 的形式是“去获取这些数据，我会等到你得到它”。异步的形式是“去获取这些数据，当你得到它时告诉我”。如果你在做前者，那么你所需要的只是数据。如果你在做后者，你首先需要一个数据已经到达的通知，然后你需要数据。 success 参数（顺便说一下，它已被 done() 函数取代——向前和向上等等）就是那个通知，并且你附加到它的函数将你的数据作为参数提供给它.

不推荐使用同步调用的原因是它们阻止用户在调用完成之前对页面执行任何其他操作。这并不意味着它们不应该被使用。使用同步调用的一个很好的例子就是这个。我有一个不在网络上运行的应用程序；相反，它是一个使用浏览器作为容器的内部数据库应用程序。如果用户在字段中输入股票编号，我想查找该股票编号是否已输入，如果已输入，则向用户发送消息。如果用户输入重复的数字，我不希望用户离开该字段。这意味着我想在查找号码时阻止浏览器活动；这意味着同步调用。

【讨论】：

【解决方案3】：

问题是因为你没有定义变量数据引起的，所以尝试删除 data: data 行，看起来你只是得到一个通常不会接受查询字符串的 JavaScript 文件：

$(document).ready(function()
 {
   $.ajax({
     type: 'GET', // not sure if I should use POST or GET
     url: 'api/exceptions_all.php',
     dataType: 'json',
     async: false,
     success: function(response)
     {
       console.log(response); 
     },
     fail: function()
     {
       console.log('fail');
     }
   });
 });

还尝试在ajax成功中使用其他变量而不是数据。

【讨论】：