codeigniter 使用 AJAX 用select中选择的内容填充表格

mbskvtky  于 2022-12-07  发布在  其他
关注(0)|答案(2)|浏览(117)

我想在页面中显示从DB获得的数据在我的视图中,我有3个选择,他们将从中获得查询信息,还有一个执行操作的按钮。但是,当我按下按钮时,它并没有在我想填充的表中绘制任何内容。但是,当我看到数据时,我抛出一个console.log,它不会抛出这样的错误,但是它不会在视图中显示信息。
我的javascript代码如下:

$(document).ready(function() {
        $('#searchData').click(function() {
            var url = "<?php echo base_url('index.php/Dashboard_admin/search_report') ?>";
            var id_compania = document.getElementById('id_compania').value;
            var id_activity = document.getElementById('id_activity').value;
            var month_ = document.getElementById('month_').value;
            $.ajax({
                url: url,
                type: "POST",
                data: {
                    'id_compania': id_compania,
                    'id_activity': id_activity,
                    'month_': month_
                },
                dataType: "JSON",
                success: function(data) {
                    console.log(data);
                    var html = '';
                    var i;
                    for (i = 0; i < data.length; i++) {
                        html += '<tr>' +
                            '<td>' + data[i].dttime + '</td>' +
                            '<td>' + data[i].amount + '</td>' +
                            '<td>' + data[i].description + '</td>' +
                            '<td>' + data[i].frequency + '</td>' +
                            '<td>' + data[i].Month_pay + '</td>' +
                            '<td>' + data[i].Year_pay + '</td>' +
                            '<td>' + data[i].dttime_pay + '</td>' +
                            '</tr>';
                    }
                    $('#datos').html(html);
                }
            });
        })
    })

我在 AJAX 的知识是相当少的,所以就我来这是感谢许多疑问,我已经解决了问题,从这里。
下面是视图代码:

<div class="row">
                    <div class="col">
                        <label>Company: </label>
                        <select id="id_compania" name="id_compania" class="form-control">
                            <option value="">-SELECT-</option>
                            <?php
                                for ($i = 0; $i < count($compania_list); $i++) {
                                    echo '<option value="'.$compania_list[$i]->id_compania.'">'.$compania_list[$i]->nombrec.'</option>';
                                }
                            ?>
                        </select>
                    </div>
                    <div class="col">
                        <label>Activities: </label>
                        <select id="id_activity" name="id_activity" class="form-control">
                            <option value="">-SELECT-</option>
                            <?php
                                for ($i = 0; $i < count($activity_list); $i++) {
                                    echo '<option value="'.$activity_list[$i]->id_activity.'">'.$activity_list[$i]->activities.'</option>';
                                }
                            ?>
                        </select>
                    </div>
                    <div class="col">
                        <label>Month: </label>
                        <select id="month_" name="month_" class="form-control">
                            <option value="">-SELECT-</option>
                            <option value="1">January</option>
                            <option value="2">February</option>
                            <option value="3">March</option>
                            <option value="4">April</option>
                            <option value="5">May</option>
                            <option value="6">June</option>
                            <option value="7">July</option>
                            <option value="8">August</option>
                            <option value="9">September</option>
                            <option value="10">October</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                        </select>
                    </div>
                    <div class="col">
                        <center>
                        <button type="submit" class="btn btn-success" id="searchData">Search</button>
                        </center>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <table class="stripe hover multiple-select-row data-table-export nowrap">
                        <thead>
                            <tr>
                                <th class="table-plus datatable-nosort">Date</th>
                                <th class="table-plus datatable-nosort">Amount</th>
                                <th class="table-plus datatable-nosort">Description</th>
                                <th class="table-plus datatable-nosort">Frequency</th>
                                <th class="table-plus datatable-nosort">Month</th>
                                <th class="table-plus datatable-nosort">Year</th>
                                <th class="table-plus datatable-nosort">Datetime Pay</th>
                            </tr>
                        </thead>
                        <tbody id='datos'>
                        </tbody>
                    </table>
                </div>

我附加了我的控制器和我的模型的功能,我正在与CodeIgniter 3和我的PHP版本的主机是7.4.25。
控制器:
此函数帮助我加载视图并使用数据填充选择

public function show_report() {
    if ( $this->admin->logged_id() ) {
        $data['compania_list'] = $this->admin->get_compania_list_admin(); 
        $data['activity_list'] = $this->admin->get_activity_list();
        $this->load->view("reports", $data);
    } else {
        redirect("login_admin");
    }
}//fin show_report

另一个函数负责查询模型

public function search_report() {
    $id_compania = $this->input->post('id_compania');
    $id_activity = $this->input->post('id_activity');
    $month_ = $this->input->post('month_');
    $data['search'] = $this->admin->search_report($id_compania, $id_activity, $month_);
    echo json_encode($data);
    //$this->load->view("reports", $data);
}

我的模型如下:

function search_report($id_compania, $id_activity, $month_) {
    $this->db->select("DATE_FORMAT(datetime, '%m/%d/%y') AS dttime, amount, description, frequency, Month_pay, Year_pay, DATE_FORMAT(datetime_pay, '%m/%d/%y') AS dttime_pay");
    $this->db->from('payment_reports');
    $this->db->join('compania', 'compania.id_compania = payment_reports.id_compania');
    $this->db->join('activities', 'activities.id_activity = payment_reports.id_activity');
    $this->db->where('payment_reports.id_compania=',$id_compania);
    $this->db->where('activities.id_activity=', $id_activity);
    $this->db->where('MONTH(datetime)=', $month_);
    $this->db->where('YEAR(datetime) = YEAR(NOW())');
    $query = $this->db->get();
    return $query->result();
}

我在Stack Overflow页面上用西班牙语问了这个问题,但是没有人回答,我已经试了一个多月了。他们给予我的一个解决方案是追加JSON.parse,但是它给了我下面的错误:

Uncaught SyntaxError: Unexpected token o in JSON at position 1     at JSON.parse (<anonymous>)     at Object.success (show_report:329:24)     at i (script.js:2:28017)     at Object.fireWith [as resolveWith] (script.js:2:28783)     at A (script.js:4:14035)     at XMLHttpRequest.<anonymous> (script.js:4:16323)

即使我在我的后端添加了MIME头,我在那里返回了json_decode(我的查询的响应),但它没有做任何更改header('Content-Type: application/json');
我在翻译的帮助下问这个问题,因为我的英语很差,但如果我需要解决这个问题,我不知道还能做什么

1yjd4xko

1yjd4xko1#

AJAX 中更改dataType,如下所示:

dataType: "html",

让我知道这是否解决了您的问题

dtcbnfnu

dtcbnfnu2#

首先,你需要把你的datos id移到tbody,然后,像这样设置你的javascript。

$(document).ready(function() {
    $('#searchData').click(function() {
        var url = "<?php echo base_url('index.php/Dashboard_admin/search_report') ?>";
        var id_compania = document.getElementById('id_compania').value;
        var id_activity = document.getElementById('id_activity').value;
        var month_ = document.getElementById('month_').value;
        $.ajax({
            url: url,
            type: "POST",
            data: {
                'id_compania': id_compania,
                'id_activity': id_activity,
                'month_': month_
            },
            dataType: "JSON",
            success: function(data) {
                console.log(data);
                var html = '';
                var i;
                for (i = 0; i < data.length; i++) {
                    $('#datos').append('<tr><td>' + data[i].dttime + '</td><td>' + data[i].amount + '</td><td>' + data[i].description + + '</td><td>' + data[i].frequency + '</td><td>' + data[i].Month_pay + '</td><td>' + data[i].Year_pay + '</td><td>' + data[i].dttime_pay + '</td></tr>');
            }
        });
    })
})

相关问题