Laravel 8 & Ajax - 将数据插入 table 始终刷新加载

Question

首先，我不得不说我是初学者Ajax，我想在不刷新页面的情况下将数据插入数据库，每次我提交新的分类，laravel 始终显示消息“Data berhasil disimpan”，而不是重定向到索引

这是我的控制器

public function store(Request $request)
    {
        $kategori = new Kategori();
        $kategori->nama_kategori = $request->nama_kategori;
        $kategori->save();

        return response()->json('Data berhasil disimpan', 200);
    }

这是我的模态：

<div class="modal fade" id="modal-form" tabindex="-1" aria-labelledby="modal-form" aria-hidden="true">
    <div class="modal-dialog">
        <form action="" method="post" class="form-horizontal">
            @csrf
            @method('post')

            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="modal-form">Tambah Kategori</h5>
                </div>

                <div class="modal-body">

                    <div class="form-group">
                        <label for="NamaKategori">Nama Kategori</label>
                        <input type="text" name="nama_kategori" class="form-control" id="NamaKategori"
                            placeholder="Masukan Nama Kategori" required autofocus>
                        <span class="help-block with-errors"></span>
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-sm btn-flat btn-primary"><i class="fa fa-save"></i>
                        Simpan</button>
                    <button type="button" class="btn btn-sm btn-flat btn-warning" data-dismiss="modal"><i
                            class="fa fa-arrow-circle-left"></i> Batal</button>
                </div>

            </div>

        </form>
    </div>
</div>

这是我的 ajax 脚本：

<script>
    let table;

    $(function () {
        table = $('.table').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            autoWidth: false,
            ajax: {
                  url: '{{ route('kategori.data') }}',
            },

            columns: [
                {data: 'DT_RowIndex', searchable: false, sortable: false},
                {data: 'nama_kategori'},
                {data: 'aksi', searchable: false, sortable: false},
            ]
        });

        $('#modal-form').validator().on('submit', function (e) {
            if (! e.preventDefault()) {
                $.ajax({
                    url:$('#modal-form form').attr('action'),
                    type: 'post',
                    data: $('#modal-form form').serialize()
                })
                
                .done((respone)=>{
                    $('#modal-form').modal('hide');
                    table.ajax.reload();
                })
                .fail((errors)=>{
                alert('Tidak dapat menyimpan data');
                return;
                });

            }
        });
    });

    function addForm(url) {
        $('#modal-form').modal('show');
        $('#modal-form .modal-title').text('Tambah Kategori');

        $('#modal-form form')[0].reset();
        $('#modal-form form').attr('action', url);
        $('#modal-form [name=_method]').val('post');
        $('#modal-form [name=nama_kategori]').focus();
    }
</script>

当我提交表单时，它 returns 我 JSON 像这样回复“Data berhasil disimpan”

Answer 1

当用户试图提交表单时，submit 事件被发送到一个元素。它只能附加到 <form> 个元素。您可以在此处查看详细信息：Jquery submit()

在你的 js 代码中 $('#modal-form') 不是 <form> 它只是 <div>.

因此您应该为表单分配一个 ID，并像这样更改您的代码：

模态：

<form id="myForm" action="" method="post" class="form-horizontal">
 ...
</form>

Javascript:

$('#myForm').validator().on('submit', function (e) {
      if (!e.preventDefault()) {
           $.ajax({
               url: $('#myForm').attr('action'),
               type: 'post',
               data: {data : $('#myForm').serialize()}
           })
               .done((respone) => {
                   // your code here
               })
               .fail((errors) => {
                   // your code here
               });
      }
 });

Laravel 8 & Ajax - 将数据插入 table 始终刷新加载

Laravel 8 & Ajax - Insert data into table always refresh loading

php

ajax

laravel-8