php - JSON 中的 foreach 函数只返回一行

Question

我试图从 JSON 响应中显示多行，但不知何故每次只返回一行。查询在服务器上运行良好。如果我在没有 ajax/json 的情况下使用它，代码运行良好。我对此很头疼。我在这里做错了什么？任何帮助，将不胜感激。

HTML

         <form>
              <span id="span_section_row"></span>
                    <hr>
                    <div class="row">
                        <div class="form-group col-lg-6">
                            <label for="exam_date">Select Date of Exam</label>
                            <input type="text" class="form-control" id="exam_date" required readonly>
                        </div>
                        <div class="form-group col-lg-6">
                            <label for="exam_time">Enter Exam Time(In Minutes)</label>
                            <input type="number" class="form-control" id="exam_time" required>
                        </div>
                    </div>
                </form>

AJAX 调用:

$(document).on('click', '.schedule', function(){
        var exam_id = $(this).attr("id");
        var btn_action = 'fetch_single';
        $.ajax({
            url:'web-services/schedule-exam.php',
            method:"POST",
            data:{exam_id:exam_id, btn_action:btn_action},
            dataType:"json",
            success:function(data)
            {
                $('#setup_exam_modal').modal('show');
                $('#span_section_row').html(data.section_row);
            }
        })
    });

PHP:

if($_POST['btn_action'] == 'fetch_single')
    {
        $exam_type_id = $_POST['exam_id'];
        $query = "
        SELECT a.*, b.exam_type_name 
                        FROM exam_section a
                        INNER JOIN exam_type b 
                        ON a.exam_type_id=b.exam_type_id
                         WHERE a.status = :status
                         AND a.exam_type_id = :exam_type_id
        ";
        $statement = $conn->prepare($query);
        $statement->execute(
            array(
                ':status'    =>    'active',
                ':exam_type_id'    =>    $exam_type_id

            )
        );
        $result = $statement->fetchAll();
        foreach($result as $row)
        {
            $output['section_id'] = $row['section_id'];
            $output['exam_type_id'] = $row['exam_type_id'];
            $output['section_name'] = $row['section_name'];
            $output['exam_type_name'] = $row['exam_type_name'];

            $output['section_row'] = 
                                '<div class="row">
                                <div class="form-group col-lg-4">
                                    <label for="select_section"></label>
                                    <p id="select_section">'.$row['section_name'].'</p>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label for="no_of_questions">No. of Questions</label>
                                    <input type="number" class="form-control" id="no_of_questions" required>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label for="mark_per_question">Mark Per Question</label>
                                    <input type="number" class="form-control" id="mark_per_question" required>
                                </div>
                            </div>
                            ';
        }
        echo json_encode($output);
    } 

Answer 1

首先，在 PHP 中，每次循环都会覆盖数组，因此只会将一次事件传递回 javascript 进行处理

if($_POST['btn_action'] == 'fetch_single') {
    $exam_type_id = $_POST['exam_id'];
    $query = "SELECT a.*, b.exam_type_name 
              FROM exam_section a
                INNER JOIN exam_type b ON a.exam_type_id=b.exam_type_id
              WHERE a.status = :status
              AND a.exam_type_id = :exam_type_id";

    $statement = $conn->prepare($query);
    $statement->execute(
            array(  ':status' => 'active', 
                    ':exam_type_id' => $exam_type_id)
                );
    $result = $statement->fetchAll();

    foreach($result as $row) {
        $htm = '<div class="row">
                    <div class="form-group col-lg-4">
                        <label for="select_section"></label>
                        <p id="select_section">'.$row['section_name'].'
                        </p>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="no_of_questions">No. of Questions</label>
                        <input type="number" class="form-control" id="no_of_questions" required>
                    </div>
                    <div class="form-group col-lg-4">
                        <label for="mark_per_question">Mark Per Question</label>
                        <input type="number" class="form-control" id="mark_per_question" required>
                    </div>
                </div>';

        $output[] = [
                    'section_id'        => $row['section_id'],
                    'exam_type_id'      => $row['exam_type_id'],
                    'section_name'      => $row['section_name'],
                    'exam_type_name'    => $row['exam_type_name'],
                    'section_row'       => $htm
                    ];
    }
    echo json_encode($output);
} 

所以现在在 javascript 中，您需要按照 RASHAN 的建议处理该数组

$(document).on('click', '.schedule', function(){
    var exam_id = $(this).attr("id");
    var btn_action = 'fetch_single';
    $.ajax({
        url:'web-services/schedule-exam.php',
        method:"POST",
        data:{exam_id:exam_id, btn_action:btn_action},
        dataType:"json",
        success:function(data)
        {
            $('#setup_exam_modal').modal('show');
            //$('#span_section_row').html(data.section_row);
            var t="";
            $.each(data,function(index,value){
               // concatenate all the occurances of the html and place on page
                t += value.section_row;
            })
            $('#span_section_row').html(t);
        }
    })
});

Now you have one remaining problem that I can see and that is you are generating multiple HTML element all with the same id like here,

<p id="select_section">'.$row['section_name'].'

in multiple sections of your HTML. As I am not familiar with whats going on elsewhere in the code, possibly you dont need these id's at all and can remove them. Or you will have to make them unique on the page, or amend your javascript to select those elements some other way