Проблема при сохранении данных с ajax в laravel

Question

Я работаю над частью комментариев моего проекта новостного портала. У меня есть следующий код в контроллере для сохранения комментария:

public function store(Request $request){
  $rules = $this->comments->getRules();
  $validator = Validator::make($request->all(), [
      'name' => 'bail|required|string',
      'email' => 'bail|required|string',
      'comment' => 'required|string',
      'post_id' => 'required|numeric'
  ]);
  if ($validator->fails()) {
      return response()->json(['error'=>$validator->getMessageBag()->toArray()], 422);
  }

  $data = $request->all();
  $data['name'] = $request->name;
  $data['email'] = $request->email;
  $data['comment'] = $request->comment;
  $data['post_id'] = $request->post_id;
  $this->comments->fill($data);
  $status = $this->comments->save();

  if($status){
      return response()->json(['status'=>true,'data'=>'You comment has been posted successfully. You should be able to see your comment once it is approved!']);
  } else {
      return response()->json(['status'=>false,'data'=>null]);
  }
}

И у меня есть следующий код в html:

<p id="comment-message"></p>
<div class="row">
    <div class="col-sm-6">
        <label> <span>Comment *</span>
            <textarea name="comment" class="form-control" required="" id="comment" aria-required="true"></textarea>
        </label>
    </div>
    <div class="col-sm-6">
        <label> <span>Name *</span>
            <input type="text" name="name" class="form-control" id="name" required="" aria-required="true"> </label>
        <label> <span>Email Address *</span>
            <input type="email" name="email" class="form-control" id="email" required="" aria-required="true"> </label>
    </div>
    <div class="col-md-12">
        <button type="submit" class="btn btn-primary" id="comment-submit">Post a Comment</button>
    </div>
</div>
<input type="hidden" name="post_id" value="{{ @$data->id }}" id="post_id">

И в части ajax:

<script type="text/javascript">
$( document ).ready(function(){
    $('#comment-submit').on('click', function(){
        let name = $('#name').val();
        let email = $('#email').val();
        let comment = $('#comment').val();
        let post_id = $('#post_id').val();
        $.ajax({
            url:"/comments",
            dataType: 'json',
            data: { _token:"{{ csrf_token() }}", "_method": 'POST',name:name,email:email,comment:comment, post_id: post_id},
            success: function(response) {
                $('#name').val('');
                $('#email').val('');
                $('#comment').val('');
                //document.getElementById("comment-message").innerHTML = response.status;
            },
            error: function(response){ console.log(response);
              $('#name').val('');
              $('#email').val('');
              $('#comment').val('');
              //document.getElementById("comment-message").innerHTML = response;
            }
        });
    })
})

Теперь, когда я пытаюсь заполнить комментарий без ajax, таблица комментариев заполняется, но не заполняется ajax. Это также не выдает никакой ошибки. Я что-то упустил в своей ajax части?

Answer 1

Я был на самом деле, потому что я не установил ключ метода в ajax.

Изменение моего ajax кода на это сработало для меня:

<script type="text/javascript">
$( document ).ready(function(){
    $('#comment-submit').on('click', function(){
        let name = $('#name').val();
        let email = $('#email').val();
        let comment = $('#comment').val();
        let post_id = $('#post_id').val();
        $.ajax({
            method: "POST",
            url:"/comments",
            dataType: 'json',
            data: { _token:"{{ csrf_token() }}", "_method": 'POST',name:name,email:email,comment:comment, post_id: post_id},
            success: function(response) {
                $('#name').val('');
                $('#email').val('');
                $('#comment').val('');
                //document.getElementById("comment-message").innerHTML = response.status;
            },
            error: function(response){ console.log(response);
              $('#name').val('');
              $('#email').val('');
              $('#comment').val('');
              //document.getElementById("comment-message").innerHTML = response;
            }
        });
    })
})
</script>

Но все же я удивляюсь, почему он не работал, когда у меня определен ключ метода в data:.

Answer 2

Вы не указываете method в своем вызове ajax. По умолчанию он рассматривается как GET запрос:

Согласно Jquery ajax Документация n:

(по умолчанию: GET) )

Тип: String HTTP-метод, используемый для запроса (например, «POST», «GET», «PUT»).

Чтобы разрешить этот метод добавления: «POST "в вашем ajax звоните

 $.ajax({
        url:"/comments",
        dataType: 'json',
        method: "POST", // add this
        data: { _token:"{{ csrf_token() }}", "_method": 'POST',name:name,email:email,comment:comment, post_id: post_id},
        success: function(response) {
            $('#name').val('');
            $('#email').val('');
            $('#comment').val('');
            //document.getElementById("comment-message").innerHTML = response.status;
        },
        error: function(response){ console.log(response);
          $('#name').val('');
          $('#email').val('');
          $('#comment').val('');
          //document.getElementById("comment-message").innerHTML = response;
        }
    });

Answer 3

Если вы строите запрос и помещаете маршрут в веб-маршрут, вам все равно нужно, чтобы токен CSRF был передан в вашем запросе Ajax, это не так, когда вы помещаете свой маршрут в маршрут Api. Итак, что вам нужно сделать: 1. Добавить токен в заголовок HTML

<head>
    ...
    <meta name="_token" content="{{csrf_token()}}" />
</head>

И, наконец, назначить значение токена заголовку вашего AJAX запроса

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