如何使用表单提交将数据提取到 jquery dataTable答案

【问题标题】：How to fetch data to jquery dataTable with form submit如何使用表单提交将数据提取到 jquery dataTable
【发布时间】：2019-05-25 12:04:40
【问题描述】：

我正在使用表单提交使用 jquery Ajax 插入数据，并在表单提交后将数据提取到 dataTable，以下代码给出 DataTables 警告：表 id=mainTable - 请求第 0 行第 1 列的未知参数“1”。 . . .

var mainTable = $('.mainTable').DataTable();
$('#Form').submit(function(e) {
  e.preventDefault();
  var form = $(this).serialize();
    $.ajax({
        url: "result.php",
        type: "post",
        data: form 
  }).done(function (data) {
        mainTable .clear().draw();
        mainTable .rows.add(data).draw();
        }).fail(function (jqXHR, textStatus, errorThrown) { 
        });
});

HTML

<div class="content">
    <!-- form start -->
    <form method="post" id="Form">     

            <input type="text" name="id">
            <input type="text" name="name">
            <input type="text" name="class">

        <button type="submit">submit</button>
    </form> 


<table id="mainTable" class="mainTable table table-striped">
  <thead>
    <tr>
      <th>Roll No</th>
      <th>Name</th>
      <th>class</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</div>

PHP

$id = $_POST['group_id'];
$rollno = $_POST['roll_no'];
$name = $_POST['name'];
$class = $_POST['class'];

$insert = "insert into students (roll_no,group_id,name,class) values(:roll_no,:id,:name,:class)";
$insert = $db->prepare($insert );
$insert ->bindParam(':roll_no',$rollno);
$insert ->bindParam(':id',$id );
$insert ->bindParam(':name',$name);
$insert ->bindParam(':class',$class);
$insert ->execute();

$fetch = "SELECT roll_no,name,class FROM students where group-id=:id";
$fetch = $db->prepare($fetch );
$fetch ->bindParam(':id',$id);
$fetch ->execute();

$output = array('data' => array());
while($row = $fetch ->fetch(PDO:: FETCH_OBJ)) {

    $id = $row->roll_no;
    $name = $row->name;
    $class = $row->class;
$output['data'][] = array( $id,$name,class);    
} // /while 

echo json_encode($output);

【问题讨论】：

如果没有 JSON 响应示例，很难复制它。但我的疯狂猜测是错误是因为您将记录数组放入 data 属性中。您是否尝试过改用mainTable.rows.add(data.data).draw();？如果它仍然不起作用，您可能需要发布 JSON 响应示例
@YohanesGultom 给出错误Uncaught TypeError: Cannot read property 'length' of undefined at s.<anonymous> 和mainTable.rows.add(data.data).draw();。
由于您没有提供任何额外的数据，我再做一个疯狂的猜测：由于缺少标头，json 响应不会自动解析。在这种情况下你想试试data = JSON.parse(data);mainTable.rows.add(data.data).draw();
@YohanesGultom 就是这样，它现在可以工作了，谢谢。

标签： javascript jquery datatables

【解决方案1】：

从评论中移出

根本原因仅仅是因为 jQuery ajax() 没有解析来自 result.php 的 JSON 响应。最简单的解决办法是在done()里面解析：

data = JSON.parse(data);
mainTable.rows.add(data.data).draw();

另一种解决方案是在result.php 中正确地return JSON header。 done() 中的 data = JSON.parse(data) 行也应省略：

header('Content-Type: application/json');
echo json_encode($output);

【讨论】：