如何使用AJAX选项将表单数据发送到Jquery Datatables中的php脚本

Question

我正试图通过DataTables选项使用AJAX将数据发送到php脚本。我遇到的问题是，我的php脚本返回了一个未定义的错误。我用DevTools完成了代码，我可以看到serialize((正确地返回了表单中的选择，但php脚本仍然告诉我$Wrkgrp是未定义的。

编辑：为了简洁起见，我没有包含脚本标签或html(正文等(标签

注意：如果我把数据表初始化放在Ajax调用的成功函数中，而不是下面的函数中，JS代码就可以工作了。

代码

<div style="Width:auto;margin:auto;float:right;">
<form method="post" id="filters" autocomplete="off" action="'test.php">
Workcenter: <br>
<select id='Wrkgrp' name='Wrkgrp'>
<option value='Gen_Assy' selected>Gen_Assy</option>
<option value='Laser_Bend'>Laser_Bend</option>
<option value='Paint'>Paint</option>
<option value='Rig'>Rigging</option>
<option value='Tank_Assy'>Tank_Assy</option>
<option value='Weld'>Weld</option>
</select>
<input type="submit" name="submit" value="Submit">
</form>
</div>
$(document).ready(() => {
$('#GA').DataTable({
ajax:{
type: 'post',
url: 'test.php',
dataType: 'json',
data: $('#filters').serialize()
},
dom: 't',
createdRow: (tr, _,rowIndex) => $(tr).attr('rowIndex',rowIndex),
columns:[
{data: 'NAME', title: 'Name'},
{data: 'ROOF_ASSEMBLY', title: 'Roof Assembly'},
{data: 'DOOR_ASSEMBLY', title: 'Door Assembly'},
{data: 'WALL_ASSEMBLY', title: 'Wall Assembly'},
{data: 'PLENUM_ASSEMBLY', title: 'Plenum Assembly'},
{data: 'TANK_BASE_ASSEMBLY', title: 'Tank/Base Assembly'},
{data: 'FINAL_ENCLOSURE_ASSEMBLY', title: 'Final Enclosure Assembly'},
{data: 'ENCLOSURE_ELECTRICAL', title: 'Enclosure Electrical'},
{data: 'SUBPANEL_ASSY_WIRING_ELECTRICAL', title: 'Sub-Panel Assy Wiring'},
{data: 'PREP_ELECTRICAL', title: 'Prep Electrical'},
{data: 'TANK_BASE_ELECTRICAL', title: 'Tank/Base Electrical'},
{data: 'FINAL_ASSEMBLY_ELECTRICAL', title: 'Final Assembly Electrical'},
{data: 'CRANE_OPERATION_SAFETY', title: 'Crane Operation & Safety'},
{data: 'RESPIRATORY_PROTECTION', title: 'Respiratory Protection'},
{data: 'HEAVY_LIFTING', title: 'Heavy Lifting'},
{data: 'FORKLIFT_CERTIFIED', title: 'Forklift Certified'},
{data: 'LOCKOUT_TAGOUT_CERTIFIED', title: 'Lockout Tag-out Certified'},
{data: '5S_TRAINING', title: '5S Training'},
{data: 'CRANE_SLING_TRAINING', title: 'Crane & Sling Training', render: function (data,type,row,meta) {'<i class="edit fa fa-pencil"></i>';} ,width: '20%'}
],
pageLength: 50
});
});

test.php

$wrkgrp = $_POST['Wrkgrp'];
try {
$conn = new PDO ($o,$user,$p);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOExeception $e){
echo "Connect Failed: " . $e->getMessage();
}
if ($wrkgrp === 'Gen_Assy'){
$qry = "select EMPLOYEE.NAME, GEN_ASSY.ROOF_ASSEMBLY,GEN_ASSY.DOOR_ASSEMBLY,GEN_ASSY.WALL_ASSEMBLY,GEN_ASSY.PLENUM_ASSEMBLY,GEN_ASSY.TANK_BASE_ASSEMBLY,GEN_ASSY.FINAL_ENCLOSURE_ASSEMBLY,
GEN_ASSY.ENCLOSURE_ELECTRICAL,GEN_ASSY.SUBPANEL_ASSY_WIRING_ELECTRICAL,GEN_ASSY.PREP_ELECTRICAL,GEN_ASSY.TANK_BASE_ELECTRICAL,GEN_ASSY.FINAL_ASSEMBLY_ELECTRICAL,GEN_ASSY.CRANE_OPERATION_SAFETY,
GEN_ASSY.RESPIRATORY_PROTECTION,GEN_ASSY.HEAVY_LIFTING,GEN_ASSY.FORKLIFT_CERTIFIED,GEN_ASSY.LOCKOUT_TAGOUT_CERTIFIED,GEN_ASSY.5S_TRAINING,GEN_ASSY.CRANE_SLING_TRAINING
from GEN_ASSY left join EMPLOYEE on GEN_ASSY.EMPLOYEE = EMPLOYEE.ID order by EMPLOYEE.NAME";
}
$stmt = $conn->prepare($qry);
$stmt->execute();
$result = $stmt->fetchall(PDO::FETCH_ASSOC);
echo json_encode($result);

Answer 1

Andrew James的评论是正确的。我需要在DataTables选项中的Ajax调用的数据选项中使用一个函数。

var dT = $('#GA').DataTable({
ajax:{
type: 'post',
url: 'test.php',
dataType: 'json',
dataSrc: '',
data: function (d){
d.Wrkgrp = $('#Wrkgrp').val();
}
},
dom: 't',
createdRow: (tr, _,rowIndex) => $(tr).attr('rowIndex',rowIndex),
columns:[
{data: 'NAME', title: 'Name'},
{data: 'ROOF_ASSEMBLY', title: 'Roof Assembly'},
{data: 'DOOR_ASSEMBLY', title: 'Door Assembly'},
{data: 'WALL_ASSEMBLY', title: 'Wall Assembly'},
{data: 'PLENUM_ASSEMBLY', title: 'Plenum Assembly'},
{data: 'TANK_BASE_ASSEMBLY', title: 'Tank/Base Assembly'},
{data: 'FINAL_ENCLOSURE_ASSEMBLY', title: 'Final Enclosure Assembly'},
{data: 'ENCLOSURE_ELECTRICAL', title: 'Enclosure Electrical'},
{data: 'SUBPANEL_ASSY_WIRING_ELECTRICAL', title: 'Sub-Panel Assy Wiring'},
{data: 'PREP_ELECTRICAL', title: 'Prep Electrical'},
{data: 'TANK_BASE_ELECTRICAL', title: 'Tank/Base Electrical'},
{data: 'FINAL_ASSEMBLY_ELECTRICAL', title: 'Final Assembly Electrical'},
{data: 'CRANE_OPERATION_SAFETY', title: 'Crane Operation & Safety'},
{data: 'RESPIRATORY_PROTECTION', title: 'Respiratory Protection'},
{data: 'HEAVY_LIFTING', title: 'Heavy Lifting'},
{data: 'FORKLIFT_CERTIFIED', title: 'Forklift Certified'},
{data: 'LOCKOUT_TAGOUT_CERTIFIED', title: 'Lockout Tag-out Certified'},
{data: '5S_TRAINING', title: '5S Training'},
{data: 'CRANE_SLING_TRAINING', title: 'Crane & Sling Training', render: function (data,type,row,meta) {return data+'<i class="edit fa fa-pencil"></i>';}}
],
pageLength: 50
});