用Ajax填充表中选择的内容

Question

我想在页面中显示我通过Ajax从DB (MySQL)获得的数据。在我看来，我有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，我的托管版本是7.4.25。

主计长：

此函数帮助我加载视图并用数据填充select

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();
}

我用西班牙语在堆栈溢出页面上问了这个问题，但是没有人回答，我已经尝试了一个多月的时间来解决它。他们试图给我的一个解决方案是附加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)

即使我在后端(返回查询的json_decode(response )中添加了MIME头，但它没有做任何更改( header('Content-Type: application/json'); )

我在翻译的帮助下问这个问题，因为我的英语很差，但是如果我需要解决这个问题，我不知道还能做什么

Answer 1

在ajax中更改dataType如下：

dataType: "html",

如果这解决了你的问题，请告诉我

Answer 2

首先，您需要将您的数据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>');
            }
        });
    })
})