AJAX 成功无法将数据填充到表格 HTML

Posted 2023-05-08

【中文标题】AJAX 成功无法将数据填充到表格 HTML

【英文标题】：AJAX success can't populate data to table HTML

【发布时间】：2015-04-21 01:13:24

【问题描述】：

我使用 ajax 过滤表上的数据。但是当成功调用时，表格上没有显示数据。表格上的数据消失了。

这是我的脚本代码：

$(document).ready(function() 
    $("#inputJenis").change(function() 
        var key = $(this).val();
        var jenis_semester = 'key=' + key;
        $.ajax(
            type: "POST",
            url: '<?php echo base_url("search/filter") ?>',
            data: jenis_semester,
            dataType: 'json',
            success: function(data) 
                $('table tbody').html(data);
            ,
            error: function(XMLHttpRequest) 
                alert(XMLHttpRequest.responseText);
            
        );
    );
);

这是我的控制器：

public function filter()
    
        $this->load->helper('url');

        $key = $this->input->post('key');

        if ( $key == 'Ganjil' ) 
            $this->load->model('filter_model', 'filter');
            $data['semester'] = $this->filter->getGanjil($key);
         else 
            $this->load->model('filter_model', 'filter');
            $data['semester'] = $this->filter->getGenap($key);
        
        $this->load->view('tambah_semester', $data);

        echo json_encode($data);
    

这是我的模型：

public function getGanjil($key)
    

        $sql = "SELECT * FROM tahunajaran WHERE jenis = 'Ganjil'";
        $data = $this->db->query($sql);
        $index = 1;
        foreach ($data->result() as $row) 
            $dataSemester[$index] = array('id_tahun_ajaran' =>$row->id_tahun_ajaran,
                            'awal_semester' =>$row->awal_semester ,
                            'akhir_semester'=> $row->akhir_semester,
                            'tahun_ajaran'=>$row->tahun_ajaran,
                            'jenis'=>$row->jenis,
                            'nama_semester'=>$row->nama_semester );
            $index++;
        
        return $dataSemester;
    

    public function getGenap($key)
    

        $sql = "SELECT * FROM tahunajaran WHERE jenis = 'Genap'";
        $data = $this->db->query($sql);
        $index = 1;
        foreach ($data->result() as $row) 
            $dataSemester[$index] = array('id_tahun_ajaran' =>$row->id_tahun_ajaran,
                            'awal_semester' =>$row->awal_semester ,
                            'akhir_semester'=> $row->akhir_semester,
                            'tahun_ajaran'=>$row->tahun_ajaran,
                            'jenis'=>$row->jenis,
                            'nama_semester'=>$row->nama_semester );
            $index++;
        
        return $dataSemester;
    

我想在 HTML 表格中显示数据

<table class="footable table table-striped" data-page-size="10">
    <thead>
        <tr>
            <td id="colNomer">Id</td>
            <td id="colNama">Nama</td>
            <td id="colTanggal">Awal semester</td>
            <td id="colTanggal">Akhir semester</td>
            <td id="colTanggal">Tahun ajaran</td>
            <td id="colNama">Jenis</td>
            <td id="colAksi">Aksi</td>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

我们可以填写关于成功调用 ajax 的表格。这是图片 数据无法填充到表中

【问题讨论】：

在你的模型函数getGanjil()中$key在哪里被使用？

【参考方案1】：

我会将您的控制器方法分开，一个用于 AJAX 调用，另一个用于您的普通视图，如下所示：

public function doFilter($key) 
    $this->load->helper('url');
    $this->load->model('filter_model', 'filter');
    if ($key == 'Ganjil') 
        $data['semester'] = $this->filter->getGanjil($key);
     else 
        $data['semester'] = $this->filter->getGenap($key);
    
    return $data;


public function getFilterJson() 
    $key = $this->input->post('key');
    $data = $this->doFilter($key);
    echo json_encode($data);


public function filter() 
    $key = $this->input->post('key');
    $data = $this->doFilter($key);
    $this->load->view('tambah_semester', $data);

您还需要将一个对象传递给您的 AJAX 调用并添加我们在控制器中创建的新 URL，我也会使用 jquery 的 $.post() ，所以像这样更改您的 JS：

$(document).ready(function() 
    $("#inputJenis").change(function() 
        $('table tbody').empty();//this will make sure the table is empty first
        var key = $(this).val();
        var postdata = key: key;
        var url = '<?php echo base_url("search/getFilterJson") ?>';
        $.post(url, postdata, function(result) 
            console.log(result);
            if (result) 
                var obj = JSON.parse(result);
                $.each(obj, function(key, line) 
                    var elem = '<tr>\n\
                                    <td>' + line.id + '</td>\n\
                                    <td>' + line.Nama + '</td>\n\
                                    <td>' + line.Awal + '</td>\n\
                                    <td>' + line.Akhir + '</td>\n\
                                    <td>' + line.Tahun + '</td>\n\
                                    <td>' + line.Jenis + '</td>\n\
                                    <td>' + line.Aksi + '</td>\n\
                                </tr>';
                    $('table tbody').append(elem);
                 );
             else 
                //your error code
            
        );
    );
);

而你的模型，发生了太多事情。您应该使用 Codeigniter 的函数，如下所示：

public function getGanjil($key) 
    $this->db->select("*");
    $this->db->from("tahunajaran");
    $this->db->where("jenis", "Ganjil");
    $data = $this->db->get();
    return $data->result_array();


public function getGenap($key) 
    $this->db->select("*");
    $this->db->from("tahunajaran");
    $this->db->where("jenis", "Genap");
    $data = $this->db->get();
    return $data->result_array();

【讨论】：

在你的ajax success 方法中，你能console(data) 告诉我你得到了什么结果吗？

在您的模型中，$key 变量的用途是什么？我没有看到它被使用。

什么都没有发生，兄弟。我想过滤表格上的数据，当用户从选择框中选择值时，例如“Ganjil”，然后表格上的数据更改只显示具有“Ganjil”行的数据

好的，在我提供的 JS 中，当你在 console.log(key) 之后 var key = $(this).val(); 之后你会得到什么？

你知道console怎么用吗？