POST http://localhost:8000/offers-ajax/store 419 (unknown status) Laravel AJAX

Question

I'm a beginner in AJAX and trying to post data form by using AJAX, but this error shows in the console:

POST http://localhost:8000/offers-ajax/store 419 (unknown status)

I do not know why; I tried a lot but nothing seems to work.

I tried to post data without using AJAX queries and it works fine.

These are the routes:

Route::group(['prefix'=>'offers-ajax'],function(){

    Route::get('/create','AjaxController@create')-> name('ajax.offer.create');
    Route::post('/store','AjaxController@store')-> name('ajax.offer.store');

});

Controller:

public function store(OffersRequest $request)
{
    $file_name = $this->saveImage($request->photo, 'images/offers');

    // Offer::create($request -> except(['_token']));
    Offer::create([
        'photo' => $file_name,
        'name_ar' => $request->name_ar,
        'name_en' => $request->name_en,
        'details_ar' => $request->details_ar,
        'details_en' => $request->details_en,
        'price' => $request->price,

    ]);

}

blade create page:

@extends('layouts.app')

@section('content')
<div class="container">

<form method="POST" class="needs-validation" novalidate action=""
      enctype="multipart/form-data">
    @csrf

    <div class="form-group">
        <label for="exampleInputEmail1">chose Photo</label>
        <input type="file" class="form-control" name="photo">
        @error('photo')
        <small class="form-text text-danger">{{$message}}</small>
        @enderror
    </div>

    <div class="form-group">
        <label for="Name">{{__('messages.create_name')}}</label>
        <input type="text" class="form-control" id="name" name="name_ar"  placeholder="Enter name">
        @error('name_ar')
        <span class="text-danger">{{$message}}</span>
        @enderror

    </div>

    <div class="form-group">
        <label for="Name">{{__('messages.create_name_en')}}</label>
        <input type="text" class="form-control" id="name" name="name_en"  placeholder="Enter name">
        @error('name_en')
        <span class="text-danger">{{$message}}</span>
        @enderror

    </div>
    <div class="form-group">
        <label for="price">{{__('messages.create_price')}}</label>
        <input type="text" class="form-control" id="price" name="price" placeholder="price here">
        @error('price')
        <span class="text-danger">{{$message}}</span>
        @enderror
    </div>
    <div class="form-group">
        <label for="details">{{__('messages.create_details')}}</label>
        <input type="text" class="form-control" id="details" name="details_ar" placeholder="details here">
        @error('details_ar')
        <span class="text-danger">{{$message}}</span>
        @enderror
    </div>

    <div class="form-group">
        <label for="details">{{__('messages.create_details_en')}}</label>
        <input type="text" class="form-control" id="details" name="details_en" placeholder="details here">
        @error('details_en')
        <span class="text-danger">{{$message}}</span>
        @enderror
    </div>

    <button type="button" id="save_offer" class="btn btn-primary">create</button>


</form>
</div>
@stop

@section('script')
<script>

    $(document).on('click', '#save_offer', function(){

    $.ajax({
       type: 'post',
        url: "{{Route('ajax.offer.store')}}",
        data:  {},
        success: function (data){

        }, error: function (reject){

        }
    });

    });

</script>
@stop

Please could you help me

Answer 1

You need to add meta tag in your html page

<meta name="csrf-token" content="{{ csrf_token() }}">

Then in js add this in the beginning

$.ajaxSetup({
data: {
    _token: $('meta[name="csrf-token"]').attr('content')
 }
});