Ошибка Ajax-запроса

Question

Я пытаюсь сделать ajax-запрос на сохранение некоторой информации в моей базе данных. Все идет хорошо, пока мне не нужно обновить таблицу, и появляются некоторые неприятные ошибки.

Вот мой модальный html

  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#create-subscription-modal">
    Create subscription
 </button>

 <!-- Modal -->
 <div class="modal fade" id="create-subscription-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create subscription</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{ route('subscriptions.store') }}" method="post">
                    @csrf

                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" class="form-control" name="name">
                    </div>

                    <div class="form-group">
                        <label for="type">Type</label>
                        <select id="type" class="form-control" name="type">
                            <option value="unlimited">Unlimited</option>
                            <option value="sessions">Sessions</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="sessions">Sessions</label>
                        <input type="number" id="sessions" class="form-control" name="sessions">
                    </div>

                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea id="description" class="form-control" cols="30" rows="6" name="description"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="price">Price</label>
                        <input type="text" id="price" class="form-control" name="price">
                    </div>

                    <div class="form-group">
                        <label for="is_active">Active
                            <input id="is_active" type="checkbox" name="is_active" checked/>
                        </label>
                    </div>

                    <div class="form-group">
                        <button type="submit" id="create-subscription" class="btn btn-primary">Create</button>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
 </div>

Ajax-скрипт вызова

<script>
    $(document).ready(function() {

        $('#create-subscription').click(function(event) {

            event.preventDefault();

            let name = $('#name').val();
            let type = $('#type').val();
            let sessions = $('#sessions').val();
            let description = $('#description').val();
            let price = $('#price').val();
            // let is_active = $('#is_active').val();
            let token = $('input[name="_token"]').val();
            let table = $('#example1').DataTable( {
                ajax: "data.json"
            } );

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': token
                }
            });

            $.ajax({
               type: "post",
               url: "{{ route('subscriptions.store') }}",
               data: {name: name, type: type, sessions: sessions, description: description, price: price},
               dataType: "json",
               success: function(data) {
                    alert('It works!');
                   $('#create-subscription-modal').modal('hide');
                   table.ajax.reload();
               },
               error: function(data) {
                   console.log('Error: ' + data);
               }
            });

        });

    });
</script>

Код контроллера для обработки запроса

public function store(Request $request)
    {
        $name = $request->name;
        $type = $request->type;
        $sessions = $request->sessions;
        $description = $request->description;
        $price = $request->price;

        $subscription = Subscription::create([
            'name' => $name,
            'type' => $type,
            'sessions' => $sessions,
            'description' => $description,
            'price' => $price,
        ]);

        return $subscription;
    }

Я не знаю, что делать, чтобы решить эту проблему, пожалуйста, помогите мне, если это возможно. Я застрял с этим. Большое спасибо!

Извините, что не показываю фотографии, вот мои ошибки.

Ошибка

И даже если у меня есть table.ajax.reload (), он не перезагружает datatable, и еще одна вещь (мне нужно обновить страницу вручную), если я пытаюсь dd (request-> all ()) в мой контроллер, он вызывает объект ошибки ajax.

Когда я пытаюсь dd запросить все

Answer 1

• Во-первых, вы должны указать, какую версию DataTable jquery вы используете.

Попробуйте этот код в большинстве случаев для его работы с последней версией DataTable.

table.ajax.reload( null, false );//instead of table.ajax.reload()

Ссылка отсюда: https://datatables.net/reference/api/ajax.reload(). Если это не работает, пожалуйста, убедитесь, что на стороне сервера работает должным образом, и, пожалуйста, проверьте вашу версию jQuery DataTables.

Если она не работает