Ajax 在按钮单击后未提交表单

Question

我在这里有这个表单，我正在尝试使用 Ajax 将数据发送到控制器，但有些东西总是失败，并且 ajax 根本无法工作。我正在尝试插入一个问题并通过表单将测验 ID 发送到控制器

<div id="form_two" class="container col-sm-8">
    <div class="row card border-secondary align-items-center">
        <div class="form-group col-sm-7">
            <br><br>
            <form id="report">
                @csrf
                <input type="hidden" name="quizTest" value="{{ \Illuminate\Support\Facades\Session::get('testID') }}">
                <input class="form-control" id="question" type="text" name="question" placeholder="Question" size="40" required><br>
                <input class="form-control" id="answerA" type="text" name="answerA" placeholder="Option A" size="40" required><br>
                <input class="form-control" id="answerB" type="text" name="answerB" placeholder="Option B" size="40" required><br>
                <input class="form-control" id="answerC" type="text" name="answerC" placeholder="Option C" size="40" required><br>
                <input class="form-control" id="answerD" type="text" name="answerD" placeholder="Option D" size="40" required><br>
                <input class="form-control" id="correct_answer" type="text" name="correct_answer" placeholder="Correct Answer" size="40" required><br>
                <button class="btn btn-primary" id="registraion-form" >ADD A QUESTION </button>
            </form>
        </div>
    </div>
</div>

这是我试图将数据发送到 /test 端点的 ajax 代码，但是当我提交表单时，console.log 上没有打印任何内容，并且控制器的响应没有返回任何内容，这导致ajax 不起作用的结论。当我按下提交按钮时，只有 URL 发生了变化，我做错了什么？

$('#registraion-form').click(function (e) {
    e.preventDefault();
    let question = $("input[name=question]").val();
    let answerA = $("input[name=answerA]").val();
    let answerB = $("input[name=answerB]").val();
    let answerC = $("input[name=answerC]").val();
    let answerD = $("input[name=answerD]").val();
    let quizTest = $("input[name=quizTest]").val();
    let correct_answer = $("input[name=correct_answer]").val();
    $.ajax({
        type: "POST",
        url: "/test",
        data : {
            quizTest: quizTest,
            question : question,
            answerA:answerA,
            answerB:answerB,
            answerC:answerC,
            answerD:answerD,
            correct_answer : correct_answer
        },
        success: function(response) {
            console.log(response);
            console.log(response.message);
            $("#report")[0].reset();
        },
        error : function (error) {
            console.log(error);
        }
    })
})

Answer 1

仅仅因为您在表单中添加了@csrf，并不意味着您一切正常。

由于 AJAX 正在提交一个 POST 请求，该请求也应该带有 csrf 令牌，否则它将无法工作。

检查例如this question.