Php ajax laravel每页有许多表单

我想保存结果而不刷新整个页面。我有多个表单，我需要保存点击提交按钮的表单的数据

目前，所有内容都已保存，但会刷新整个页面

blog.partials.\u comment\u repress.blade

@foreach($comment as $comments)

     <form method="post" class="formmmmmmmmmmm">
         {{ csrf_field() }}
         <input class="form-text form-item__input" type="text" id="form-field-id" name="comment_body" value="" size="60" maxlength="128">
         <input type="button" name="submit" value="submit" class="btn btn-primary"> 
     </form>

     @include('blog.partials._comment_replies', ['comment' =>$comments->replies])
@endforeach

注释控制器

public function replyStore(Request $request)
{
     $reply = new Comment;
     $reply->body = $request->get('comment_body');

     $reply->user()->associate($request->user());
     $reply->parent_id = $request->get('comment_id');

     $post = Article::find($request->get('article_id'));

     $check = $post->comment()->save($reply);
     $arr = array('msg' => 'Something goes to wrong. Please try again lator', 'status' => false);
     if ($check) { 
         $arr = array('msg' => 'Successfully submit form using ajaxxxxxxxxxxxxx', 'status' => true);
     }
     return Response()->json($arr);   
}

---

首先，让我们修复无效的HTML。DOM中的每个元素都应该使用唯一id。因此，请使其唯一，例如使用注释id，或者如果不使用注释id，甚至可以将其删除。另外，我们需要更改输入类型以提交。您不必在这里指定form方法

@foreach($comment as $comments)

     <form class="formmmmmmmmmmm">
         @csrf
         <input class="form-text form-item__input" type="text" id="form-field-id-{{ $comment->id }}" name="comment_body" value="" size="60" maxlength="128">
         <input type="submit" name="submit" value="Submit" class="btn btn-primary"> 
     </form>

    @include('blog.partials._comment_replies', ['comment' =>$comments->replies])
@endforeach

---

删除了不必要的变量url、post和表单存在性检查。这应该一次提交一个表单而不刷新页面。

在使用ajax保存数据时，表单不需要操作，提交将重定向到该操作。只需更改submit to按钮，然后单击event change submit to click，ajax url就是您的操作url，所以请对这些更改进行编辑。请检查一下。将此$'.formmmmm'更改为$'.formmmmm'也不起作用。在“提交”时，函数{更改为$'.formmmmm'。在“单击”时，函数E{在你的表单中，这对我没有帮助。请分享更多详细信息。给定的标记只包含一个表单。提交表单时会发生什么？控制台上有错误消息吗？因为我的脚本是在blade中编写的，所以我得到了错误模板错误，但我有其他脚本，它们工作正常。其次，页面在单击按钮，然后尝试分离模板文件，而不是在self中包含相同的文件。

@foreach($comment as $comments)

     <form class="formmmmmmmmmmm">
         @csrf
         <input class="form-text form-item__input" type="text" id="form-field-id-{{ $comment->id }}" name="comment_body" value="" size="60" maxlength="128">
         <input type="submit" name="submit" value="Submit" class="btn btn-primary"> 
     </form>

    @include('blog.partials._comment_replies', ['comment' =>$comments->replies])
@endforeach

$(document).ready(function() {
    $('.formmmmmmmmmmm').submit(function (e) {
        e.preventDefault();
        const form = $(this);

        let submit = form.find('[type=submit]');
        let submitOriginalText = submit.attr('value');
        let data = form.serialize();

        form.validate({
            rules: {
                comment_body: {
                    required: true,
                    maxlength: 100
                },
            },
            messages: {
                name: {
                    required: 'Please enter name',
                    maxlength: 'Your last name maxlength should be 100 characters long.'
                }, 
            },

            submitHandler: function(form) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $('#send_form').html('Sending...');

                $.ajax({
                    url: "{{ route('reply.add') }}",
                    type: 'POST',
                    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);
                    }
                });
            }
        });
    });
});