Метод POST не поддерживается для этого маршрута

Question

Я использую Laravel v6.18.22 Я могу успешно вставлять и редактировать staff records, используя jquery и ajax! Проблема в том, что после щелчка submit в модальной форме я могу успешно вставлять данные или редактировать, но после любой из этих операций modal hided и я получаю success message, я использую sweetalert, но браузер продолжает загружаться и в конечном итоге выбросить эту ошибку! The POST method is not supported for this route. Supported methods: GET, HEAD.

Как мне решить эту проблему, все работает так, как я ожидал, затем ошибка все разрушает

Ajax обновление кода

 $(function () {
        $('#addStaffForm').on('submit', function (e) {
           if(!e.isDefaultPrevented()){
               let id = $('#id').val();
               if(save_method === 'add') {
                   $.ajax({
                       type: "POST",
                       url: 'registerStaff',
                       data: new FormData($('#addStaffForm')[0]),
                       contentType: false,
                       processData: false,
                       success: function(data) {
                           $('#addStaff').modal('hide');
                           table.ajax.reload();
                           Swal.fire({
                               title: 'Success',
                               text: 'Staff Registered Successfully',
                               icon: 'success',
                           });
                       },
                       error: function (data) {
                           Swal.fire({
                               title: 'Error',
                               text: 'Staff registration failed',
                               icon: 'error',
                           });
                       }
                   })
               }else {
                  
                   $.ajax({
                       type: "POST",
                       url: 'updateStaff/' + id,
                       data: new FormData($('#addStaffForm')[0]),
                       contentType: false,
                       processData: false,
                       headers: {
                           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                       },
                       success: function(data) {
                           $('#addStaff').modal('hide');
                           table.ajax.reload();
                           Swal.fire({
                               title: 'Success',
                               text: 'Staff Updated Successfully',
                               icon: 'success',
                           });
                       },
                       error: function (data) {
                           Swal.fire({
                               title: 'Error',
                               text: 'Staff Update failed',
                               icon: 'error',
                           });
                       }
                   })
               }

           }

        })
    });

Маршруты

Route::post('updateStaff/{id}', 'StaffController@updateStaffInfo');
Route::post('registerStaff', ['as'=> 'register_staff', 'uses' => 'StaffController@registerStaff']);

Форма

<form method="post" id="addStaffForm" data-toggle="validator">
            <div class="modal-body">
                @csrf
                @method('POST')
                <input type="text" name="id" id="id">
                <div class="form-group">
                    <label>{{__('Staff Name')}}</label>
                    <input  type="text" class="form-control" id="name" name="name" required  autofocus>
                </div>
                <div class="form-group">
                    <label>{{__('Email Address')}} </label>
                    <input required id="email" type="email" class="form-control " name="email">
                </div>
                <div class="form-group">
                    <label >{{__('Password')}} </label>
                    <input required value="12345678" readonly id="password" type="password" class="form-control" name="password">
                    <span class="text-info" role="alert"><strong>{{__('Default Password 12345678')}}</strong></span>
                </div>
                <div class="form-group">
                    <label>{{__('Confirm Password')}} </label>
                    <input  readonly type="password" id="confirm_password" class="form-control" name="password_confirmation" value="12345678" required>
                </div>
                <div class="form-group">
                    <label>{{ __('Position') }} </label>
                    <select required id="role_id" type="select" class="form-control" name="role_id">
                        @if($roles->count() > 0)
                            @foreach ($roles as $role)
                                <option value="{{$role->id}}">{{$role->role_name}}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" id="insertBtn" class="btn btn-info"></button>
            </div>
        </form>

Вкладка «Сеть» в Google chrome

введите описание изображения здесь

Answer 1

Вам необходимо предотвратить обработку события отправки, оно пытается отправить сообщение по URL-адресу текущей страницы, а не по маршруту в вашем ajax вызове.:

$(function () {
    $('#addStaffForm').on('click', function (e) {
        e.preventDefault();
           
        let id = $('#id').val();
           
        if(save_method === 'add') {
            ...