在 laravel 中使用 ajax 提交多个表单

Question

我面临 problem.I 在一个页面中提交多个表单。我需要提交所有页面重新加载的内容。我正在尝试一些 Ajax 代码。使用 ajax 代码，第一个表单已正确提交，但其余表单无法正常工作。

这是我的视图文件

<div class="col-md-6 col-lg-6 col-sm-6 col-lg-offset-5">

@foreach($questions as $question)

<form method="post" action="{{route('answer.store')}}" id="ansform">
    {{ csrf_field() }}

    <h1>{{$question->question}} ?</h1>
    <div class="col-lg-offset-1">
        <input type="hidden" name="question" value="{{$question->question}}">
        <input type="hidden" name="student_id" value="{{$student_id}}">
        <input type="hidden" name="true_answer" value="{{$question->answer}}">
        <input name="answer" value="{{$question->choice1}}" type="radio"> {{$question->choice1}} <br>
        <input name="answer" value="{{$question->choice2}}" type="radio">{{$question->choice2}}<br>
        <input name="answer" value="{{$question->choice3}}" type="radio">{{$question->choice3}}<br>
        <input name="answer" value="{{$question->choice4}}" type="radio">{{$question->choice4}}<br>
        <input type="submit" name="submit" value="submit" class="btn btn-primary">
    </div>
 </form>

@endforeach

视图文件的输出是-

我的路线Answer.store在这里

public function store(Request $request)
{
    //
    if ($request->ajax()) {
        $answer=Answer::create([
            'stu_id' => $request->input('student_id'),
            'question' => $request->input('question'),
            'given_answer' => $request->input('answer'),
            'true_answer' => $request->input('true_answer')

        ]);
        return response($answer);
    }else{
        return "ajax not done";
    }
}

最后 ajax 脚本 是

<script type="text/javascript">
    $(document).ready(function(){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    });

    $('#ansform').on('submit',function(e){
        e.preventDefault();
        var data = $(this).serialize();
        var url = $(this).attr('action');
        var post = $(this).attr('method');
        $.ajax({
            type : post,
            url : url,
            data :data,
            success:function(data){
                console.log(data)
            }
        })
    })
</script>

任何人都请帮助我。我该怎么做？

Answer 1

我正在回答最后一条评论。

$('.ansform').on('submit',function(e){
    var form = $(this);
    var submit = form.find("[type=submit]");
    var submitOriginalText = submit.attr("value");

    e.preventDefault();
    var data = form.serialize();
    var url = form.attr('action');
    var post = form.attr('method');
    $.ajax({
        type : post,
        url : url,
        data :data,
        success:function(data){
           submit.attr("value", "Submitted");
        },
        beforeSend: function(){
           submit.attr("value", "Loading...");
           submit.prop("disabled", true);
        },
        error: function() {
            submit.attr("value", submitOriginalText);
            submit.prop("disabled", false);
           // show error to end user
        }
    })
})

这应该有效。在发送表单之前，我们禁用提交按钮（这可以防止我们重复提交）。然后我们将文本更改为 "Loading..." 或告诉最终用户他必须等待查询完成的内容。

如果 AJAX 成功：我们将禁用按钮并将文本更改为已提交。

如果发生错误：我们启用提交，returns原始文本并允许最终用户再次提交。你必须向他展示错误或其他东西。

您可以查看 AJAX 个事件：https://api.jquery.com/Ajax_Events/.

在 laravel 中使用 ajax 提交多个表单

Submit multiple form using ajax in laravel

javascript

php

ajax

laravel-5

laravel-5.5