如何在jQuery DataTables中通过AJAX向PHP脚本提交表单数据并解决变量未定义问题

尝试通过DataTables的AJAX选项向PHP脚本发送表单数据，PHP脚本返回$Wrkgrp未定义错误。DevTools调试确认serialize()已正确获取表单选中值，但PHP仍报错。另外，若将DataTables初始化代码放在AJAX请求的success函数中，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>

<script>
$(document).ready(() => {
    $('#GA').DataTable({
        ajax:{
            type: 'post',
            url: 'test.php',
            dataType: 'json',
            data: function() {
                return $('#filters').serializeArray();
            }
        },
        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 '<i class="edit fa fa-pencil"></i>';} ,width: '20%'}
        ],
        pageLength: 50
    });
});
</script>

注：修复了表单action的单引号错误，将ajax.data改为函数返回序列化数组，确保每次请求都能获取最新表单值；同时修复了render函数缺少return的问题

<?php
// 检查POST参数是否存在
$wrkgrp = isset($_POST['Wrkgrp']) ? $_POST['Wrkgrp'] : '';
if(empty($wrkgrp)){
    die(json_encode([]));
}

try {
    // 替换为实际的数据库连接参数
    $conn = new PDO($o, $user, $p);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e){ // 修复拼写错误：PDOExeception -> PDOException
    echo json_encode(['error' => "Connect Failed: " . $e->getMessage()]);
    exit;
}

$qry = "";
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";
} else {
    // 补充其他工作中心的查询逻辑，或者默认查询
    $qry = "SELECT NAME FROM EMPLOYEE ORDER BY NAME";
}

// 确保查询语句不为空
if(empty($qry)){
    die(json_encode([]));
}

$stmt = $conn->prepare($qry);
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($result);
?>

注：增加了POST参数存在性检查，修复了PDO异常类的拼写错误，补充了非Gen_Assy情况下的查询逻辑，避免$qry未定义导致的报错

1. 前端ajax.data改为函数：DataTables初始化时会立即执行serialize()，如果后续表单值变化，静态数据不会更新。改为函数后，每次AJAX请求都会重新获取表单最新值，同时serializeArray()返回的格式更符合AJAX数据传输要求。
2. PHP变量大小写检查：PHP变量区分大小写，确保报错提示的$Wrkgrp和代码中的$wrkgrp拼写一致，若代码中误写为$Wrkgrp会直接导致未定义错误。
3. 参数存在性检查：增加isset($_POST['Wrkgrp'])判断，避免PHP抛出"未定义索引"的错误。
4. 异常类拼写修复：PDOExeception改为PDOException，确保能正确捕获数据库连接异常。
5. 查询语句兜底：补充非目标工作中心的查询逻辑，避免$qry未定义导致的prepare失败。

内容的提问来源于stack exchange，提问作者ProfoundHypnotic