Laravel 8 和 Ajax - 将数据插入表中总是刷新加载

Posted 2023-03-21

【中文标题】Laravel 8 和 Ajax - 将数据插入表中总是刷新加载

【英文标题】：Laravel 8 & Ajax - Insert data into table always refresh loading

【发布时间】：2022-01-07 09:36:12

【问题描述】：

首先，我不得不说我是使用Ajax的初学者，我想在不刷新页面的情况下将数据插入db，每次我提交新的类别时，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>

当我提交表单时，它会返回 JSON 响应，例如“Data berhasil disimpan”

【参考方案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 总是显示“Data berhasil disimpan”

@Catatonic32 提交表单后你的数据表没有重新加载数据吗？如果是这样，您是否在浏览器的控制台选项卡中检查过 js 错误？

完成了 broooo