拉威尔7美元。未执行ajax请求

Question

我正在尝试使用ajax和laravel7在PostShowBlade模板的底部向帖子添加评论。我包括这一部分以显示现有评论和一个表单以添加新评论

<div class="container comments" #id="commentaires">
    <h2 class="comments-title">Commentaires des adhérents</h2>
    
    @foreach ($comments as $comment)
        <div class="comment-header">
            Posté par
            {!! \App\User::find($comment->agent_id)->firstname; !!}
            {!! \App\User::find($comment->agent_id)->familyname; !!}
            
            le
            <?php \Carbon\Carbon::setLocale('fr');?>
            {{\Carbon\Carbon::parse($comment->created_at)->translatedFormat('l jS F Y')}}
        </div>
        <div class="comment-body">
            {{$comment->content}}
        </div>
    @endforeach
    @auth
        <div class="comment-form">
            <div class="comment-invite">
                Laissez un commentaire
            </div>
            {!! Form::open(['action'=>"CommentController@store",'method'=>'POST']) !!}
                <div class="row post-option-background">
                    <div class="col-md-12" >
                        {{ Form::hidden('post_id', $post->id) }}
                        {{ Form::hidden('agent_id', auth()->user()->id) }}
                         {{ Form::text('content','',['class'=>'form-control'])}}
                    </div>
                </div>
                {{Form::submit('Enregistrer',['class'=>'btn btn-primary btn-submit'])}}

            {!! Form::close() !!}

        </div>
    @endauth
    @guest
        <div class="comment-invite">
            Connectez-vous pour laisser un commentaire
        </div>
    @endguest
</div>

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

    $(".btn-submit").click(function(e){
        e.preventDefault();
        var post_id = $("input[name=post_id]").val();
        var agent_id = $("input[name=agent_id]").val();
        var content = $("input[name=content]").val();
        console.log('post_id is : '+post_id+', agent_id is : '+agent_id+' and content is : '+content);
        var url='{{ url('comments') }}'
        console.log(url);
        $.ajax({
            type:'POST',
            url:url,
            data:{post_id:post_id, agent_id:agent_id, content:content},
            dataType: 'json',
            success:function(data){
                 $("#commentaires").append("<div> success </div>");
                 console.log('success');}
        });
        console.log('reaching end of click function');
    });
</script>

路线

我的路线是

Route::resource('posts','PostsController');
Route::post('/comments','CommentController@store')->name('storeAjax');

CommentController中的存储函数是

/**
 * Store a newly created comment in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(Request $request){
    if ($request->ajax()){
        $this->validate($request, [
        'content'=>'required',
        'post_id'=>'required',
        'agent_id'=>'required'
        ]);
            return response()->json(['success'=>'Got Simple Ajax Request.']);
    } else{
        return 'request is not ajax';
    }
}

我显示帖子，填写评论表单：“这是一个例子”，然后点击提交按钮。

单击功能被执行，我可以在控制台中看到各种消息

post_id为：131，agent_id为：1，内容为：这是一个示例131:303:21http://localhost:8000/comments131:305:12到达点击功能结束

然而，浏览器中不会发生任何事情。似乎没有执行ajax请求。谁能帮我修一下这个吗？

Answer 1

问题可能在于Laravel的CSRF保护。您可以通过查看浏览器开发工具（如Firefox或Chrome）的网络面板来确认这一点。如果提交表单时创建了一个状态为419的新条目，则这是CSRF问题。

您需要将CSRF标记添加到HTML中（通常在meta标记中），并将该标记与POST请求一起发送。

将此添加到您的

<meta name="csrf-token" content="{{ csrf_token() }}">

将其添加到主JS文件（例如，bootstrap.JS）

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

资料来源：https://laravel.com/docs/7.x/csrf#csrf-x-csrf-token

如果这无法解决问题，请查看Laravel错误日志。

Answer 2

尝试

$(document).on('button.btn-submit','click',function(e) {

e.preventDefault();
//rest of your code
});