首页 > 解决方案 > Laravel 7 $.ajax 请求未执行

问题描述

我正在尝试使用 ajax 和 laravel7 向帖子添加评论在帖子显示刀片模板的底部,我包括此部分以显示现有评论和添加新评论的表单

<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:21 http://localhost:8000/comments 131:305:12 到达点击功能的末尾

然而,浏览器中什么也没有发生。似乎没有执行ajax请求。有人可以帮我解决这个问题吗?

标签: jqueryajaxlaravel

解决方案


尝试

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

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

推荐阅读