can not send post the ajax in laravel

Question

I'm try to add click get value from my table this is my table

@foreach($inventory as $p)
                  <?php 
                    $no++;

                    $typesql = DB::table('product_variant_pos')
                        ->where('id_product',$p->id)
                        ->select('type')
                        ->distinct()
                        ->get();
                  ?>
                    <tr >
                      <th scope="row"><?php echo $no;?></th>
                      <td style="width:100px;">
                        @if($p->featured_image != null || $p->featured_image != '')         
                          <img src="{{ 'Images/'.$p->featured_image }}" alt="{{ $p->featured_image }}" title="{{ $p->featured_image }}" width="100px">
                        @else
                          <h4>Nothing Image Upload</h4>
                        @endif                          
                      </td>
                      <td class="data-product" id="{{ $p->id }}" data-toggle="modal" data-target="#ModalProduct" >{{ $p->item_name }}</td>
                      <td>
                        @if(!is_null($typesql))
                            @foreach($typesql as $t)
                            <ul>
                            <?php 
                            $type = DB::table('product_variant_pos')
                                ->where('id_product',$p->id)
                                ->where('type',$t->type)
                                ->get();
                            ?>
                                <li>{{ $t->type }}
                                    <ul>
                                    @foreach($type as $j)
                                        <li>{{ $j->name }}</li>
                                    @endforeach
                                    </ul>
                                </li>
                            </ul>
                            @endforeach
                        @else
                        <?php 
                            $type = DB::table('product_variant_pos')
                                ->where('id_product',$p->id)
                                ->get();
                            ?>
                                <li>{{ $t->type }}
                                    <ul>
                                    @foreach($type as $j)
                                        <li>{{ $j->name }}</li>
                                    @endforeach
                                    </ul>
                                </li>
                            </ul>
                        @endif
                      </td>
                      <td>{{ $p->category }}</td>
                      <td>{{ $p->stock }}</td>
                      <td>Rp. {{ $p->price }}</td>
                      <td>
                        <a href="product/edited/{{ $p->id }}">Edit</a>
                        |
                        <a href="product/delete/{{ $p->id }}">delete</a>
                      </td>
                    </tr>
                  @endforeach

and this is my javascript

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
    
    
    $('.data-product').click(function(e){
        
        var formData = {
            id: $(this).attr("id"),
        };
        
        var button_id = $(this).attr("id");
        
        $.ajax({
           type:'POST',
           url:'product/modal',
           data: formData,
           headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           },
           success:function(data) {
              $("#ModalProductTitle").html(data);
           },
           error: function (data) {
              console.log(data);
           }
        }); 
    });
    
} );
</script>

this script make value

The post method is not supported for this route.

I am try code for other similar question but its not work. I am try in latest laravel and php . I think is caused csrf() is not detected in my code, but I don't know where is my mistake

can anyone help me solve this problem, thankyou+.

Answer 1

There are 2 alternatives, please choose one

1. Change your route type to POST because your AJAX type is POST Route::post('/product/modal', 'ProductController@Modal');
2. Or change your AJAX type to GET because your route's type is GET

 $.ajax({ type:'GET', url:'/product/modal', data: formData, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, success:function(data) { $("#ModalProductTitle").html(data); }, error: function (data) { console.log(data); } });