Отобразить ответное сообщение для ответа Ajax от Laravel

Question

У меня есть рабочая форма, которая отправляется в базу данных из формы HTML с использованием Laravel Collective, которая отправляется на мой контроллер, и она работает нормально.

Я хочу отправить ее без перезагрузки страницы, поэтомуЯ отправляю данные с помощью AJAX.

У меня это работает, и оно пишет в БД, но я не могу заставить контроллер вернуть ответ на страницу при успешном завершении.

Ниже приведен мой сценарий:

СЦЕНАРИЙ:

$(document).ready(function(){
  $("#msg").hide();

  $("#submit").click(function() {
    $("#msg").show();


    var name = $("#recipeName").val();
    var description = $("#recipeDescription").val();
    var token = $("#token").val();

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
      type: "post",
      data: "name="+name+"&description="+description,
      dataType:'json',
      url: "{{ route('recipes.store') }}",
      success:function(data){
        $("#msg").html("Recipe Saved");
        $("#msg").fadeOut(2000);

      }
    });
  })
})

HTML:

<div class="row">
  <div class="col">
    <p class="alert alert-success" id="msg"></p>
  </div>
</div>
<div class="row">
  <div class="col">

    <!-- Start Form -->
    <input type="hidden" name="csrf" value="{{csrf_token()}}" id="token">
    <div class="form-group">
      <label for="recipeName">Recipe name:</label>
      <input type="text" class="form-control" id="recipeName" aria-describedby="emailHelp" placeholder="Enter recipe name">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="recipeDescription">Recipe Description:</label>
      <textarea class="form-control" id="recipeDescription" rows="3" placeholder="Enter a recipe description"></textarea>
    </div>
    <button type="submit" class="btn btn-primary btn-block btn-lg" id="submit">Submit</button>
    <!-- End Form -->

  </div>
</div>

КОНТРОЛЛЕР:

public function store(Request $request)
{
    $this->validate($request, [
      'name' => 'required|max:255',
      'description' => 'required'
    ]);

    $recipe = new Recipe;

    $recipe->name = $request->name;
    $recipe->description = $request->description;
    $recipe->user_id = auth()->user()->id;

    $recipe->save();

    return Response::json(array(
      'success' => true,
      'data'   => $data
    )); 
}

Я не могу понять, что мне не хватает.

Я учу AJAX на лету (я учу все это на лету, если ячестно!), но, как я уже сказал, он успешно записывает в БД, просто нужно уведомить об этом пользователя.

Answer 1

Изменение следующего в контроллере работает правильно!

...
$recipe->save();
$data = [
  'success' => true,
  'message'=> 'Your AJAX processed correctly'
] ;

return response()->json($data);

Answer 2

СКРИПТ

  $("#submit").click(function() {
        $("#msg").show();
        var name = $("#recipeName").val();
        var description = $("#recipeDescription").val();

        $.ajax({
            type: "post",
            data: {name:name,description:description,'_token':'{{csrf_token()}}'}, 
             dataType:'json',
            url: "{{ route('recipes.store') }}",
            success:function(data){
                $("#msg").html("Recipe Saved");
                $("#msg").fadeOut(2000);

            }
        });
    });

HTML

изменить тип кнопки отправки с кнопки отправки на кнопку

 <div class="row">
 <div class="col">
  <p class="alert alert-success" id="msg"></p>
  </div>
 </div>
<div class="row">
 <div class="col">

<!-- Start Form -->
<input type="hidden" name="csrf" value="{{csrf_token()}}" id="token">
<div class="form-group">
  <label for="recipeName">Recipe name:</label>
  <input type="text" class="form-control" id="recipeName" aria-describedby="emailHelp" placeholder="Enter recipe name">
  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
  <label for="recipeDescription">Recipe Description:</label>
  <textarea class="form-control" id="recipeDescription" rows="3" placeholder="Enter a recipe description"></textarea>
</div>
<button type="button" class="btn btn-primary btn-block btn-lg" id="submit">Submit</button>
<!-- End Form -->

Контроллер

необходимо указать переменную $ data

  public function store(Request $request)
  {
   $this->validate($request, [
   'name' => 'required|max:255',
  'description' => 'required'
]);

$data = 'some data';
$recipe = new Recipe;

$recipe->name = $request->name;
$recipe->description = $request->description;
$recipe->user_id = auth()->user()->id;

$recipe->save();

return Response::json(array(
  'success' => true,
  'data'   => $data
)); 
}