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

我面临一个问题。我在一页中提交了多个表单。我需要提交所有那些与外页重新加载。我正在尝试一些Ajax代码。使用ajax代码，可以正确提交第一个表单，但表单的其余部分不起作用

这是我的视图文件

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

@endforeach

视图文件的输出为-

我的路线回答。商店在这里

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>

$（文档）.ready（函数（）{
$.ajaxSetup({
标题：{
'X-CSRF-TOKEN'：$（'meta[name=“CSRF-TOKEN”]）.attr（'content'））
}
});
});
$（'#ansform'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
var data=$（this.serialize（）；
var url=$（this.attr（'action'）；
var post=$（this.attr（'method'）；
$.ajax({
类型:post,，
url:url，
数据：数据，
成功：功能（数据）{
console.log（数据）
}
})
})

---

任何人都可以帮助我。我该怎么做呢？

我在回答最后一条评论

$('.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
        }
    })
})

这应该行得通。 在发送表单之前，我们将禁用“提交”按钮（这样可以防止重复提交）。然后我们将文本更改为“加载…”或告诉最终用户必须等到查询完成

如果AJAX成功：我们将禁用按钮，并将文本更改为submitted

如果出现错误：我们启用提交，返回原始文本并允许最终用户再次提交。你必须向他表明你的错误或别的什么

---

您可以查看AJAX事件：。

您不能在页面中重复元素ID。它们的定义是独一无二的。使用类而不是首先，您似乎要生成具有相同id的多个表单，使用一个类并更改事件侦听器（

$（'.someclass'）。在（'submit'，函数（e）{

）上，您能建议我在代码中使用类的位置吗？您能给我一个示例代码吗？@MustaqueAhmed而不是

和

$（'.#ansform'）。on（'submit'，函数（e）{

使用

和

$（'.ansform'）。在（'submit'，函数（e）{

@CappY谢谢你。它很有效。有点帮助…在提交表单后我如何禁用按钮？就像它将显示已提交，并且链接已禁用一样？

$('.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
        }
    })
})