如何将学生答案的输入数组传递给控制器？

Question

我无法使用 JavaScript 将学生答案的输入数组传递给控制器。最大的问题是，如果我使用表单，我如何接收请求值？

是否可以通过表格将学生的答案以一组形式发送？

刀片页面是：

@extends('layout.master')
@section('css')
    @section('title','Teachers')
    <link href="../assets/js/DataTables/datatables.min.css" rel="stylesheet">
@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4"><span
                    class="text-muted fw-light">{{__('layout/navbar.Main_title')}} /</span> ورقة إمتحان الطالب
        </h4>
        <hr class="my-1"/>
        @if($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach($errors->all() as $error)
                        <li>{{$errors}}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="card ">
            <div class="card-body">
                <div class="row">
                    <div class="mb-3 col-md-2">
                        <label><strong>Questions List :
                            </strong></label>
                    </div>
                </div>
                <?php $i = 0; ?>
                @foreach($studentAnswers as $studentAnswer)
                    <?php $i++; ?>
                    <div class="card bg-label-dark">
                        <h5 class="card-header">
                            Question ({{$i}}) :
                            <strong>{{$studentAnswer->Question->title}}</strong>
                        </h5>
                        <div class="card-body bg-label-primary">
                            <?php $j = 0; ?>
                            @foreach($studentAnswer->Question->Answers->sortBy('title') as $QuestionAnswer)
                                <?php $j++; ?>
                                <div class="form-check mt-4 text-black">
                                    <input
                                            name="Answer{{$i}}"
                                            class="form-check-input"
                                            type="radio"
                                            value="{{$QuestionAnswer->id}}.{{$studentAnswer->id}}"
                                            id="Answer{{$QuestionAnswer->id}}"
                                    />
                                    <label class="form-check-label"
                                           for="Answer{{$QuestionAnswer->id}}"> {{$QuestionAnswer->title}} </label>
                                </div>
                            @endforeach
                        </div>

                    </div>
                    <br>

                @endforeach


            </div>
            {{--            {{$studentAnswers->links()}}--}}

            <div class="card-footer text-center">

                <strong>the End </strong>
                <br>
                <a href="{{route('StudentExams.index')}}">
                    <button type="button" class="btn btn-outline-secondary"
                            data-bs-offset="0,4"
                            data-bs-placement="bottom"
                            title="{{__('layout/student.btn_close')}}">
                        {{__('layout/student.btn_close')}}
                    </button>
                </a>

                <button type="button" class="btn btn-outline-success"
                        id="dsubmit"
                        data-bs-offset="0,4"
                        data-bs-placement="bottom"
                        title="{{__('layout/student.btn_save')}}">
                    {{__('layout/student.btn_save')}}
                </button>

            </div>
        </div>

    </div>
@endsection
@section('js')

    <script>
        $(function () {
            $("#dsubmit").click(function (e) {
                e.preventDefault();
                var answerd = [];
                $("input:radio[type=radio]:checked").each(function () {
                    answerd.push($(this).val());
                });
                $.ajax({
                    url: 'StudentDoneExam',
                    type: "POST",
                    data: {
                        _token: $('input[name=_token]').val(),
                        answers: answerd
                    }
                });

            });
        });

    </script>
@endsection

Answer 1

该问题似乎与 CSRF 保护有关， 您可能需要将其添加到表单的隐藏输入字段中

<input type="hidden" name="_token" value="{{ csrf_token() }}"> 

        <form id="answerForm">
            @csrf <!-- Include CSRF token -->
            <!-- Your existing code for displaying questions and answers -->

            <div class="card-footer text-center">
                <strong>the End </strong>
                <br>
                <a href="{{ route('StudentExams.index') }}">
                    <button type="button" class="btn btn-outline-secondary"
                            data-bs-offset="0,4"
                            data-bs-placement="bottom"
                            title="{{__('layout/student.btn_close')}}">
                        {{__('layout/student.btn_close')}}
                    </button>
                </a>

                <button type="button" class="btn btn-outline-success"
                        id="dsubmit"
                        data-bs-offset="0,4"
                        data-bs-placement="bottom"
                        title="{{__('layout/student.btn_save')}}">
                    {{__('layout/student.btn_save')}}
                </button>
            </div>
        </form>

AJAX 调用：

    <script>
        $(function () {
            $("#dsubmit").click(function (e) {
                e.preventDefault();
                var answered = [];
                $("input:radio[type=radio]:checked").each(function () {
                    answered.push($(this).val());
                });

                // Send AJAX request
                $.ajax({
                    url: 'StudentDoneExam',
                    type: "POST",
                    data: {
                        _token: $('input[name=_token]').val(),
                        answers: answered
                    }
                }).done(function(response) {
                    // Handle the response from the server
                    console.log("Response:", response);
                    // You can perform actions based on the response
                }).fail(function(xhr, status, error) {
                    // Handle errors
                    console.error("Error:", error);
                });
            });
        });
    </script>