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调用返回的内容，我认为我们可以给出更好的答案。

选择下拉选项后，Laravel复制视图

1 个答案: