使用ajax

时间:2018-08-30 05:48:32

标签: javascript php ajax

我想通过使用Ajax从数据库中获取数据。通过选择下拉选项并单击搜索按钮,将获取数据,数据将显示在表格中。我写了正确的查询,它运行得很好。我想要的只是用ajax将数据从数据库显示到表中。我已经阅读了Stackoverflow中的教程和问题,但仍然没有解决方案。这是接口user interface

的示例

这是我的控制器:

function getDataExcelKK() {
    $station = $this->input->get('station'); 

    $data = $this->M_dbstatmanagement->getDataExcelKK($station);
    $this->load->view('v_lhastat_admin', $data);
}

模型:

function getDataExcelKK($station) {
    $this->db->select("F.NAMA_FILE AS NAMA_FILE, DATE_FORMAT(F.TANGGAL_UPLOAD, '%d-%m-%Y %H:%i:%s') AS TANGGAL_UPLOAD");
    $this->db->from("fileupload F");
    $this->db->join("user U", "F.ID_USER = U.ID_USER");
    $this->db->where("U.DOMISILI", $station); 
    $this->db->order_by("F.TANGGAL_UPLOAD DESC");

    $query = $this->db->get();
    return $query->result_array();
}

视图(表):

<table class="table table-striped table-bordered table-hover table-condensed table-checkable order-column" id="lhaStatAdmin">
                    <thead>
                        <tr>
                            <th width="10%">No.</th>
                            <th width="10%">File Name</th>
                            <th width="10%">Upload Date</th>
                        </tr>
                    </thead>
                    <tbody id="isi-data">
                        <?php 
                        $no = 1;
                        $i = 0;
                        foreach($getExcelFromKK as $key => $row) {?>
                            <tr>
                                <td><?php echo $no++;?></td>
                                <td><?php echo $row['NAMA_FILE'];?></td>
                                <td><?php echo $row['TANGGAL_UPLOAD'];?></td>
                            </tr>
                        <?php } ?>

                    </tbody>
                </table>

这是我的ajax:

    $('#button-search').on('click', function() {
    var station = $('#stationChoose').val();

    $.ajax({
        async       : true,
        type        : 'GET',
        url         : '<?php echo base_url();?>sms/getDataExcelKK', 
        data        : {"station": station},
        success     : 
            function(data) {
                $('#isi-data').html(data);

            }
    });
});

更新:当我单击“搜索”按钮时,我没有在表中检索数据。user interface double table

5 个答案:

答案 0 :(得分:0)

尝试此操作,将网址保留在双引号中。

$('#button-search').on('click', function() {
    var station = $('#stationChoose').val();

    $.ajax({
        async       : true,
        type        : 'GET',
        url         : "<?php echo base_url();?>sms/getDataExcelKK", 
        data        : {"station": station},
        success     : 
            function(data) {
                $('#isi-data').html(data);

            }
    });
});

答案 1 :(得分:0)

尝试使用ajax成功的人

var preparedString = '';
for(var i=0;i<data.length;i++){
   var preparedString += '<tr>'+
                        '<td>'+(i+1)+'</td>'+
                        '<td>'+data[i].NAMA_FILE+'</td>'+
                        '<td>'+data[i].TANGGAL_UPLOAD+'</td>'+
                        '</tr>'
}
$('#isi-data').append(preparedString);

所以您的ajax应该看起来像这样

$('#button-search').on('click', function() {
var station = $('#stationChoose').val();

$.ajax({
    async       : true,
    type        : 'GET',
    url         : '<?php echo base_url();?>sms/getDataExcelKK', 
    data        : {"station": station},
    success     : 
        function(data) {
            var preparedString = '';
            for(var i=0;i<data.length;i++){
                var preparedString += '<tr>'+
                        '<td>'+(i+1)+'</td>'+
                        '<td>'+data[i].NAMA_FILE+'</td>'+
                        '<td>'+data[i].TANGGAL_UPLOAD+'</td>'+
                        '</tr>'
            }
            $('#isi-data').append(preparedString);
        }
});

});

答案 2 :(得分:0)

您可以从数据中创建html并将其附加(如@Ivan Tabaka sed),或者在PHP中创建html并将其附加到html

答案 3 :(得分:0)

是否有可能在另一个视图(例如“ table.php”)中加载完整表并通过替换先前的完整表(可以在table.php中应用数据表)来存放该视图,之后对于每个表行都可以单击要打开模式,每个tr都变成<tr onclick="action(3)">

  script:
  function action(argument) {
            // body...
            alert(argument);
        }  

答案 4 :(得分:0)

尝试将async设置为false。

$.ajax({
    async       : false,
    type        : 'GET',
    url         : "<?php echo base_url();?>sms/getDataExcelKK", 
    data        : {"station": station},
    success     : 
        function(data) {
            $('#isi-data').html(data);

        }
});