如何顯示從javascript調用php函數返回的數據？

Question

我正在使用MVC框架，在我看來，我有我的JavaScript代碼

我認為這是：

<script>
$(document).ready(function(){
    $(document).on('click','#filtr',function(){
        var id_val = $('#id_val').val();
        var key_val= $('#key_val').val();
        console.log(id_val);
        console.log(key_val);
        $.ajax({
            url:"<?php echo base_url()?>filter/filtr",
            method:"POST",
            data:{
                id_val:id_val,
                key_val:key_val
            },
            /*beforeSend:function(){
                $("container_tab").html("Searching...");
            },*/
            success:function(data){
                $("container_tab").html(data);
            }
        })
    });
});
</script> 
<div class="table-responsive">
<table class="table table-striped table-hover" id="dataTables-example">
<tr>
    <td>
        Filter by...
    </td>
    <td>
        ID: <input type="text" id="id_val" name="id_val" value="3" />
    </td>
    <td>
        KEY: <input type="text" id="key_val" name="key_val" value="asdf12" />
    </td>
    <td>
        <button type="button" class="btn btn-info btn-sm" id="filtr">FILTER</button>
    </td>
</tr>

<br />
<div id="container_tab"></div>
</table>
</div>

我希望從控制器返回的表填充<div id="container_tab"></div>

在我的過濾器控制器中，我有filtr函數，但是即使我仍未進行實際的查詢，該函數目前也不會返回$ filter_list。

public function filtr(){
    $filter_list = '';
    $filter_list .= '
                    <tr>
                            <td style="vertical-align: middle;" class="text-center">this should be sent to view as a table row</td>
                    </tr>
            ';

    echo $filter_list;

}

當我在javascript函數中執行console.log時，會顯示值“ 3”和“ asdf12”，但我從調用filtr的控制器函數中看不到任何內容。

Answer 1

success function有一個小錯誤，您的容器具有一個名為container_tab的ID，因此應在其名稱前使用#

success:function(data){
    $("#container_tab").html(data);
}