选择下拉选项后Laravel重复视图

Question

我的 Laravel 视图有问题。我正在通过 ajax 获得所需的数据，我也可以在我的视图中显示该数据。但是，我发现每当我在下拉列表中选择某些内容时，数据就会出现，但整体布局会重复。我看到我的控制台并发现在表格中我在使用下拉列表选择某些内容后创建了另一个布局。我有我的代码，请检查一下。

<select>`enter code here`
        @foreach(App\StudentsClass::all() as $class)

                <option id="class{{$class->id}}" value="{{$class->id}}">{{$class->class_name}}</option>

        @endforeach
        </select>

        <table id="studentsData" class="table table-striped table-bordered table-list-search">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Student ID</th>
                    <th>Student Name</th>
                    <th>Attendance</th>
                </tr>
            </thead>
                @foreach($students as $student)
            <tbody>
                <tr>
                    <th>{{$student->id}}</th>
                    <td>{{$student->student_id}}</td>
                    <td>{{$student->first_name}} {{$student->last_name}}</td>
                    <td>
                        <div class="form-group">
                            <select class="form-control" id="gender">
                                <option>Present</option>
                                <option>Absent</option>
                                <option>Leave</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </tbody>
                    @endforeach
        </table>
        <a class="fas fa-folder-open btn btn-success float-right mb-4 mr-2"> Save</a>
    </div>





    <script>

        $(document).ready(function () {
            @foreach(App\StudentsClass::all() as $class)
            $("#class{{$class->id}}").click(function () {
                var classes = $("#class{{$class->id}}").val();
                $.ajax({

                                    url: '{{url('/students/attendance')}}',

                                    type: "GET",

                                    dataType: "html",
                    data: 'class_id=' + classes,

                    success:function(response) {

                                        // console.log(response);
                        $('table[id=studentsData]').html(response);

                    }

                     });
            });
            @endforeach
        });

Answer 1

如果不确切知道 ajax 调用返回的内容，很难说 - 但听起来您可能会返回完整视图（来自<html> to </html> 的所有内容）并将其插入表中......或者表格的完整 html 标记，在每次 ajax 调用时创建新的嵌套表格。

你能分享你的 ajax 调用的结果吗？ （您在 console.log(response); 中看到的内容）

另外，我不认为这是相关的，但注意到您可以对代码做一些事情来简化。例如，我建议稍微更改下拉菜单的结构并给它一个像这样的 ID ...

<select id="class_select">
    @foreach(App\StudentsClass::all() as $class)
        <option value="{{$class->id}}">{{$class->class_name}}</option>
    @endforeach
</select>

然后，您可以调整 javascript 以查找类 ID 并在每次更改下拉菜单时触发 ajax 调用，而不是循环遍历每个类并添加专用函数。

<script>
    $(document).ready(function(){
        $('#class_select').change(function(){
            var class = $(this).val();
            $.ajax({
                url: '{{url('/students/attendance')}}',
                type: "GET",
                dataType: "html",
                data: 'class_id=' + classes,
                success:function(response) {
                    // console.log(response);
                    $('#studentsData').html(response);
                }
            });
        });
    });
</script>

希望对您有所帮助！如果我们能看到 ajax 调用返回什么，我想我们可以给出更好的答案。