Laravel8&Ajax-將資料插入表總是重繪加載

首先，我不得不說我是使用 Ajax 的初學者，我想在不重繪 頁面的情況下將資料插入到資料庫中，每次我提交新的 kategori 時，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”

uj5u.com熱心網友回復：

當用戶嘗試提交表單時，將提交事件發送到元素。它只能附加到<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
               });
      }
 });

標籤：php 阿贾克斯 laravel-8

上一篇：如何在帶有ADO.NET的ASP.NETCoreMVC中使用jQueryAjax自動完成

下一篇：獲取錯誤：使用AJAXPOST到C#Webmethod時出現500內部服務器錯誤