如何使用ajax保存数据而不重新加载并且显示仍然获得详细数据

Question

我想使用ajax保存数据而不重新加载，因为我想仍然在同一页面上，并且该页面是数据的详细信息。但是当我尝试使用 ajax 保存数据但该代码不起作用时，页面仍然重新加载，结果是一个空白页面。

这里是ajax

  $('#simpanshrinkage').on('click', function(){
               var input = $('#shrinkage').serialize();
                $.ajax({
                    type: 'POST',
                    url: "<?=site_url('c_transaksi/tambahaksi_shrinkage') ?>",
                    data:input,
                    success: function(data){
                       
                    }
                })
            })

这里是控制器

public function tambah_shrinkage($report_no)
    {
        $this->data['detail'] = $this->m_transaksi->get_by_reportmaterial($report_no);
        $this->data['shrinkage'] = $this->m_transaksi->get_shrinkage();
        $this->template->load('admin/layout/templatetesting','admin/transaksi/shrinkage/tambah', $this->data);
    }

 public function tambahaksi_shrinkage()
    {
        $jumlah_shrinkage = count((array)$this->input->post('nama_shrinkage_hidden'));

        $data = [];
        for ($i = 0; $i < $jumlah_shrinkage; $i++){ 
            array_push($data, ['nama_shrinkage' => $this->input->post('nama_shrinkage_hidden')[$i]]);
            $data[$i]['report_no'] = $this->input->post('report_no');
            $data[$i]['before_wash'] = $this->input->post('before_wash_hidden')[$i];
            $data[$i]['after_wash1'] = $this->input->post('after_wash1_hidden')[$i];
            $data[$i]['actual1'] = $this->input->post('actual1_hidden')[$i];
            $data[$i]['after_wash3'] = $this->input->post('after_wash3_hidden')[$i];
            $data[$i]['actual3'] = $this->input->post('actual3_hidden')[$i];
            $data[$i]['after_wash15'] = $this->input->post('after_wash15_hidden')[$i];
            $data[$i]['actual15'] = $this->input->post('actual15_hidden')[$i];
            $data[$i]['c_shrinkage'] = $this->input->post('c_shrinkage_hidden')[$i];
        }

        $this->m_transaksi->insert_shrinkage($data);
        redirect ('c_transaksi/tambah_shrinkage');
    }

这里是 HTML

<button id="simpanshrinkage" name="simpanshrinkage" type="submit" class="btn btn-block bg-gradient-info" style="font-weight: bolder; font-size: 13px; color:aliceblue;" value="tambah">SUBMIT</button>

Answer 1

首先尝试使用ajax将数据保存到数据库而不重新加载。

现在下一步是使用ajax从数据库中获取数据而无需重新加载，并使用js追加方法显示数据。为此，您可以制作一个flug或计数器，通知ajax新数据已保存，以便您可以跟踪它并获取特定数据并将其显示在正确的位置

按照ajax如何工作、js追加如何工作以及如何使用js从数据库获取特定数据的步骤进行操作