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

现在您还有一个我可以看到的问题，那就是您正在生成多个HTML元素，它们都具有相同的id，就像这里一样，

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

在HTML的多个部分中。由于我不熟悉代码中其他地方发生的事情，因此您可能根本不需要这些id并可以将其删除。否则，您将不得不使它们在页面上具有唯一性，或者修改JavaScript以其他方式选择这些元素

Answer 2

您需要从控制器以数组形式返回数据，您需要将响应迭代为

var append="";
$.each(data,function(i,v){
    append += v.section_row;
})
$('#span_section_row').html(append);

JSON中的foreach函数仅返回一行

2 个答案: