如何使用ajax在laravel中几秒钟后自动存储数据？

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. articles.index
2. articles.store
3. articles.create 等...

如果要查看资源路由的所有路由，请在项目目录中的cmd 中运行此命令

php artisan route:list --path=articles