Как автоматически сохранять данные через несколько секунд в laravel, используя ajax?

Question

Я создал раздел статьи в своем проекте. В публикации статьи я хочу автоматически сохранять данные в виде drft в моей таблице статей. Здесь я поместил блейд-файл с формой и кодом ajax. Этот код ajax не работает, значит, ничего не происходит в фоновом режиме. Когда я ввожу заголовок, никакие данные не сохраняются, а когда я открываю консоль и проверяю, работает только бегущая строка. Пожалуйста, смотрите эту ссылку также https://imgur.com/9MGxojj

<form action="{{ route('articles.store') }}" method="POST" enctype='multipart/form-data'>
  @csrf

  <div class="card shadow">
   <div class="card-body pt-3">
    <div class="row">
      <div class="col-xs-9 col-sm-9 col-md-9">
        <div class="form-group">
          <div >
            <input id="title" type="text" placeholder="Enter title here" class="form-control form--control{{ $errors->has('title') ? ' is-invalid' : '' }}" name="title" value="{{ old('title') }}">
            @if ($errors->has('title'))
            <span class="invalid-feedback" role="alert">
              <strong>{{ $errors->first('title') }}</strong>
            </span>
            @endif
          </div>
        </div>
        <div class="form-group">
          <div>
           <textarea name="description" id="mytextarea"  class="form-control textarea {{ $errors->has('description') ? ' is-invalid' : '' }}" placeholder="Description">{{old('description')}}</textarea>

           @if ($errors->has('description'))
           <span class="invalid-feedback" role="alert">
            <strong>{{ $errors->first('description') }}</strong>
          </span>
          @endif
        </div>
      </div>

    </div>    <div class="col-xs-3 col-sm-3 col-md-3">

      <div class="card">
       <div class="card-body">


         <div class="form-group">
          <label for="category_id">Choose category:</label>
          <select name="category_id" id="category_id" class="form-control @error('category_id') is-invalid @enderror"  value="{{ old('category_id') }}"   >
            <option value="0">Select Category</option>
            @foreach($category as $category)
            <option value="{{$category->id}}">{{$category->name}}</option>
            @endforeach
          </select>
          @error('category_id')
          <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
          </span>
          @enderror

        </div>
        <div class="form-group">
          <label for="subcategory_id">Sub category:</label>
          <select id="subcategory_id" name="subcategory_id" class="form-control">

          </select>

        </div> 



        <div class="form-group">
          <small>Publish Date</small>

          <div>
            <input id="datepicker" type="text" class=" py-2 form-control{{ $errors->has('show_date') ? ' is-invalid' : '' }}" name="show_date" value="@if(old('show_date')=="") {{date('Y-m-d')}} @else {{ old('show_date') }} @endif">
            @if ($errors->has('show_date'))
            <span class="invalid-feedback" role="alert">
              <strong>{{ $errors->first('show_date') }}</strong>
            </span>
            @endif
          </div>
        </div>


        <div class="form-group">
          <div>
            <small>Featured image</small>
            <input id="image"  name="image"  type="file" class="form-control {{ $errors->has('image') ? ' is-invalid' : '' }}" value="{{ old('image') }}">
            @if ($errors->has('image'))
            <span class="invalid-feedback" role="alert">
              <strong>{{ $errors->first('image') }}</strong>
            </span>
            @endif
          </div>
        </div>  



      </div>
    </div><!-- End Right Col -->


    <div class="card">
     <div class="card-body">
      <strong>Tag :</strong>
      <section id='outside-of-the-box'>

        <aside class='rightSide'>
          <input name='tags' class='tagify--outside form-control' value='' placeholder='write some tags'>
          <small>Tag's with comma separator</small>
        </aside>
      </section>
    </form>
  </div>
</div>
<a href="{{ route('articles.index') }}" class="btn btn-outline-secondary font-weight-normal mr-2">Cancel</a>
<input type="submit" class="btn btn-primary font-weight-normal px-3" name="publish" value="Publish">
<input type="submit" class="btn btn-outline-secondary font-weight-normal mx-2" name="save" value="Save as Draft">
</div>        

</div>

</div><!-- End Row -->
</div>
</form> 

Это сценарий ajax код ...

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>  
 $(document).ready(function(){  
      function autoSave()  
      {  
           var title = $('#title').val();  
           var description = $('#mytextarea').val();  
           // var category_id = $('#category_id').val();  
           if(title != '' && description != '')  
           {  
                $.ajax({  
                     url:"{{url('articles')}}",  
                     method:"POST",  
                     data:{title:title, description:description},  
                     dataType:"text",  
                     success:function(data)  
                     {  
                          // if(data != '')  
                          // {  
                          //      $('#category_id').val(data);  
                          // }  
                          $('#autoSave').text("Post save as draft");  
                          setInterval(function(){  
                               $('#autoSave').text('');  
                          }, 3000);  
                     },

                });  
           }            
      }  
      setInterval(function(){   
           autoSave();   
           }, 3000);  
 });  
 </script>

Это мой ресурсный маршрут

This is my resource route
Route::resource('articles','ArticleController');

datatabel column fields are

title
description
category_id
show_date
slug
draft

Answer 1

Я бы порекомендовал внести некоторые изменения в вашу ajax часть, просто скопируйте мой код.

$.ajax({  
       method:"POST", 
       url:"{{ route('articles.store') }}",  //Here you are using just `articles` so which route ? You have to write something like mine. Because it's a resource route.
       data:{title:title, description:description,_token:@json(csrf_token())}, //You also need to pass token here as well, like I have done for you
       success:function(data)  
       {  
         console.log(data);  
       },
       error: function(data){
         console.log(data);
       }
    });

И из контроллера сначала верните простое приветственное сообщение, чтобы увидеть, как return "Hello";, когда вы получите сообщение, а остальное вы можете продолжить.

Одна важная вещь, которую я хочу упомянуть, это то, что вы используете ресурсные маршруты и контроллер, поэтому ваши имена маршрутов будут такими:

1. article.index
2. Articles.store
3. Articles.create et c ...

Если вы хотите увидеть все маршруты вашего маршрута ресурсов, запустите эта команда в cmd в каталоге вашего проекта

php artisan route:list --path=articles