如何在模态中使用 AJAX 显示表格？

Question

officer_cashier.php

这是我的模态表单，我想在单击 DIV 标记 id=add_table 中的 cashier_template.php 中的按钮 add 时显示一个表格

<div class="modal fade" id="fee_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Process payment</h5>
                    <button type="button" class="close get_close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="POST" action="officer_cashier.php" id="reg">
                             <fieldset class="scheduler-border">
                                <legend class="scheduler-border">Student information</legend>
                                <input type="hidden" class="form-control" id="id" name="id">  
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input type="text" class="form-control" id="name" name="name" readonly="readonly">
                                </div>
                                <div class="form-group">
                                    <label for="course">Course</label>
                                    <input type="text" class="form-control" id="course" name="course" readonly="readonly">
                                </div>
                                <div class="form-group">
                                    <label for="sem">Semester</label>
                                    <input type="text" class="form-control" id="sem" name="sem" readonly="readonly">
                                </div>
                                <div class="form-group">
                                    <label for="year">Year</label>
                                    <input type="text" class="form-control" id="year" name="year" readonly="readonly">
                                </div>
                            </fieldset>
                            <button class="btn btn-sucess add_fees" id="add_fees">add</button >
                            <div class="form-group" id="display_table"></div><!-- I want to display the table inside of this DIV tag -->
                        </form>
                  </div>
              </div>
         </div>
     </div>  

脚本

这是我的 AJAX，course,sem,year 数据是我显示表格所需要的，所以如果这三个获取成功，我想在我的 DIV 标签中显示它#display_table

$(document).on('click', '.add_fees', function(){  
 $.ajax({
    type: "post",
    url: "../templates/cashier_template.php",
    data: {
        "course": $("#course").val(),
        "semester": $("#sem").val(),
        "year": $("#year").val(),
    },
    success: function(data) {
        $("#display_table").html(data);
    }
});
});

收银员模板.php

这是 AJAX 传递数据并匹配它应该以模式显示但我没有得到的查询后的收银员模板

    <?php
    ob_start();
    include("../include/userlogin.php");
    if(!isset($_SESSION)) 
    { 
        session_start(); 
    } 
    if($_SESSION['usertype'] != 1){
        header("location: login.php?success=1");
        $_SESSION['message'] = "You cannot access this page unless you are a officer!";
    } 
    ob_end_flush();
    $yearId = $_POST['year'];
    $courseId = $_POST['course'];
    $semesterId = $_POST['semester'];

    $result = $connect->query("SELECT id, total_fees, fee_names FROM manage_fees WHERE year_lvl = '$yearId' AND course = '$courseId' AND semester = '$semesterId'") or die($connect->error());
    while($row = $result->fetch_assoc()):
?>
        <div class="table-sorting  table-responsive" style="margin-top: 1rem;">
            <table class="table table-striped table-bordered table-hover" id="table1">
                <thead>
                    <tr class="p-4">
                        <th scope="col">Select</th>
                        <th scope="col">School fees</th>
                        <th scope="col">Amount</th>
                        <th scope="col">type</th>
                    </tr>
                </thead>
                <tbody>
                    <?php 
                        $result = $connect->query("SELECT * FROM fees;") or die($connect->error());
                        while($row = $result->fetch_assoc()){ 
                    ?>
                    <tr>
                        <td>              
                            <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input check_amount" name="local_fees">
                            <label class="custom-control-label" for="check_amount"></label>
                        </div>
                        </td>
                        <td name="selected_fees"><?php echo $row['fee_name']; ?></td>
                        <td name="amount"><?php echo $row['amount']; ?></td>
                        <td><?php echo $row['type']; ?></td>
                    </tr>
                    <?php } ?>
                </tbody>
            </table>
        </div>
<?php endwhile; ?>
<script src="../js/datable.js"></script>

Answer 1

当您查询fees 时，您正在覆盖$result 对象（以及随后的$row 对象）。所以顶部的大循环：

while($row = $result->fetch_assoc()):

被

覆盖

 $result = $connect->query("SELECT * FROM fees;");
 while($row = $result->fetch_assoc()){ 

但实际上，没有必要在每个循环中查询FEES。为什么不首先将所有费用数据放入一个数组中，然后在另一个循环中访问它。所以首先，在你的 php 脚本的顶部：

<?php 
$fees=array();
$result = $connect->query("SELECT * FROM fees;");
while($row = $result->fetch_assoc()){ $fees[]=$row; } 
?>

然后在你的主循环中

<?php 
foreach ($fees as $fee) {
?>
...
<td name="selected_fees"><?php echo $fee['fee_name']; ?></td>
<td name="amount"><?php echo $fee['amount']; ?></td>
<td><?php echo $fee['type']; ?></td>
</tr>
<?php } ?>