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

tpgth1q7  于 2022-10-22  发布在  jQuery
关注(0)|答案(1)|浏览(157)

我正在尝试使用AJAX从DataTables选项向php脚本发送数据。我遇到的问题是我的php脚本返回了一个未定义的错误。我用DevTools完成了代码,我可以看到serialize()正确地返回了表单中的选择,但php脚本仍然告诉我$Wrkgrp是未定义的。
编辑:为了简洁起见,我没有包括脚本标记或html(body等)标记
注意:如果我将数据表初始化放在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
    });
});

测试.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);
lyr7nygr

lyr7nygr1#

安德鲁·詹姆斯的评论是正确的。我需要在DataTables选项中的Ajax调用的data选项中使用一个函数。

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
    });

相关问题