javascript - 如何从调用 php 函数的 javascript 中显示数据？

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>

我希望从我的 Controller 返回的表格填充 <div id="container_tab"></div>

在我的过滤器 Controller 中，我有 fitr 函数，但该函数目前不返回 $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”，但我没有从调用 fitr 的 Controller 函数在屏幕上返回任何内容。

Answer 1

您的成功函数中有一个小错误，您的容器有一个名为 container_tab 的 ID，因此请在其名称前面使用 #像这样

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