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;
    }

我不知道该怎么办才能解决此问题，请尽可能帮助我。我对此深感困惑。非常感谢！

很抱歉没有显示任何图片，这是我的错误。

Errors

即使我有table.ajax.reload（），它也不会重新加载数据表，还有另一件事（我需要手动刷新页面），如果我尝试在dd（request-> all（））我的控制器，它调用错误的ajax对象。

When I am trying to dd request all

Answer 1

首先，您应该提及自己是哪个版本的DataTable jQuery 使用。

在大多数情况下，请尝试使用此代码以用于最新版本的DataTable。

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

从此处引用：https://datatables.net/reference/api/ajax.reload()。如果它不起作用，请确保服务器端正常工作，并请检查您的jquery DataTables版本。

如果它不起作用

Ajax请求失败

1 个答案: