Question

我想使用ajax进行输入搜索，但是我仍然尝试失败，但我认为问题是当ajax中的值没有发送到控制器时，导致查询像被遗漏一样，我该怎么办？解决这个问题？

我使用的是jquery-2.2.3，codeigniter 3

这是Js：

<script>
    $('#boxProfile').hide();
    $("#btnSearch").click(function(){
        var name = $("#inputNameNik").val();
        console.log(name);
        $.ajax({
            url     : '<?php echo base_url('index.php/Search/profile') ?>',
            type    : 'POST',
            data    : { post: name },
            dataType: 'JSON',
            beforeSend: function(e) {
                if(e && e.overrideMimeType) {
                    e.overrideMimeType("application/json;charset=UTF-8");
                }
            },
            success: function(response){
                var html = '';
                var i;
                var no = 1;
                var success = 'Success';
                console.log(success);
                $.each(response, function(index, obj){
                    html += '<div class="box-body box-profile">'+
                                    '<img class="profile-user-img img-circle center" style="width: 160px; height:150px; display: block; margin-left: auto; margin-right: auto;" src="'+obj.foto+'" alt="User profile picture">'+
                                    '<hr>'+
                                    '<h2 class="profile-username text-center">'+obj.name+'</h2>'+
                                    '<p class="text-muted text-center">'+obj.nik+'</p> '+
                                    '<div class="small-box bg-red">'+
                                        '<div class="inner">'+
                                            '<h4 style="text-align:center;">Annual Leave in Year : </h4>'+
                                            '<h4 style="text-align:center;">Annual Leave in Year : </h4>'+
                                            '<h4 style="text-align:center;">Leave in Year : </h4>'+
                                            '<p style="text-align:center;">Balance Leave Now : </p>'+
                                        '</div>'+
                                    '<button type="button" class="small-box btn btn-danger" style="margin:auto;" data-toggle="modal" data-target="#Import" >Click Detail <i class="fa fa-arrow-circle-right"></i></button>'+
                                    '</div>'+
                                '</div>';
                });
                $('#boxProfile').html(html);
                $('#boxProfile').show();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.responseText);
                var fail = 'Fail';
                console.log(fail);
            }
        });
    });
</script>

这是视图：

<input type="text" class="form-control" id="inputNameNik" name="nameNik" placeholder="Search Nik / Name">
<span class="input-group-btn">
   <button class="btn btn-default" type="button" id="btnSearch"><i class="fa fa-search"></i></button>
</span>

这是控制器：

public function profile() {
    $post = $this->input->post('inputNameNik');
    $query = $this->m_data->searchProfile($post);
    echo json_encode($query);
}

这是模型：

public function searchProfile($where){
    $this->db->select('cuti.id_karyawan as cutiIdKaryawan, karyawan.foto, karyawan.nik, karyawan.name, cuti_before.id_karyawan as beforeIdKaryawan, cuti_before.tahun as beforeTahun, cuti_before.sisa_cuti as beforeCuti, cuti.tahun as tahunCuti, cuti.sisa_cuti as cutiSisa, cuti.saldo_cuti as cutiSaldo, tanggal, detail_cuti.keterangan, jmlh_hari, tgl_cuti_dari, tgl_cuti_sampai, cuti.tahun, DATEDIFF(karyawan.tmt_startwork, now()) as start');
    $this->db->from('karyawan');
    $this->db->join('cuti', 'cuti.id = karyawan.id', 'left');
    $this->db->join('cuti_before', 'cuti_before.id_karyawan = karyawan.id', 'left');
    $this->db->join('detail_cuti', 'detail_cuti.id_karyawan = karyawan.id', 'left');
    $this->db->like('karyawan.name', $where, 'both');
    $this->db->or_like('karyawan.nik', $where, 'both');
    $this->db->limit(1);
    $query = $this->db->get();

    return $query->result_array();
}

Answer 1

发出Ajax请求时，您将发送post作为输入名称的键，但是在控制器中，您正在寻找inputNameNik作为键。这可能是导致您未在控制器中获得输入的原因。

尽管inputNameNik是您的html输入的ID，但是PHP并不知道此名称，它所具有的只是您通过发布请求发送的名称变量。

Answer 2

您正在传递post作为data:中的键，而不是作为名称/ id属性nameNik / inputNameNik的实际键

 var inputNameNik = $("#inputNameNik").val();//changes
        console.log(name);
        $.ajax({
            url     : '<?php echo base_url('index.php/Search/profile') ?>',
            type    : 'POST',
            data    : ({ inputNameNik: inputNameNik }),//changes

在Ajax data :中，您需要以key : value格式传递值，因此在控制器中，您可以使用键来获取发布值

即，如果我通过data: ({ nameNik: inputNameNik }),，那么我将在$nameNik = $this->input->post('nameNik');这样的控制器中使用它因此，每当您使用key从ajax becarefull传递帖子数据时，都需要在控制器中使用它来从post获取价值

Answer 3

请从您的ajax代码中删除这些行

dataType: 'JSON',
            beforeSend: function(e) {
                if(e && e.overrideMimeType) {
                    e.overrideMimeType("application/json;charset=UTF-8");
                }
            },

因此，在视图文件中，更新后的代码如下所示：

<script>
    $('#boxProfile').hide();
    $("#btnSearch").click(function(){
        var name = $("#inputNameNik").val();
        console.log(name);
        $.ajax({
            url     : '<?php echo base_url('index.php/Search/profile') ?>',
            type    : 'POST',
            data    : { name: name }, //change
            success: function(response){
                var html = '';
                var i;
                var no = 1;
                var success = 'Success';
                console.log(success);
                $.each(response, function(index, obj){
                    html += '<div class="box-body box-profile">'+
                                    '<img class="profile-user-img img-circle center" style="width: 160px; height:150px; display: block; margin-left: auto; margin-right: auto;" src="'+obj.foto+'" alt="User profile picture">'+
                                    '<hr>'+
                                    '<h2 class="profile-username text-center">'+obj.name+'</h2>'+
                                    '<p class="text-muted text-center">'+obj.nik+'</p> '+
                                    '<div class="small-box bg-red">'+
                                        '<div class="inner">'+
                                            '<h4 style="text-align:center;">Annual Leave in Year : </h4>'+
                                            '<h4 style="text-align:center;">Annual Leave in Year : </h4>'+
                                            '<h4 style="text-align:center;">Leave in Year : </h4>'+
                                            '<p style="text-align:center;">Balance Leave Now : </p>'+
                                        '</div>'+
                                    '<button type="button" class="small-box btn btn-danger" style="margin:auto;" data-toggle="modal" data-target="#Import" >Click Detail <i class="fa fa-arrow-circle-right"></i></button>'+
                                    '</div>'+
                                '</div>';
                });
                $('#boxProfile').html(html);
                $('#boxProfile').show();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.responseText);
                var fail = 'Fail';
                console.log(fail);
            }
        });
    });
</script>

在Controller中获取表单值的地方，请使用以下代码：

public function profile() {
    $post = $this->input->post('name');//it should be same as what you are sending from ajax field
    $query = $this->m_data->searchProfile($post);
    echo json_encode($query);
}

请让我知道它是否有效。谢谢

Answer 4

更正ajax调用中的两件事

如果您在URL的开头使用单引号'，请在其中使用双引号。

url     : '<?php echo base_url("index.php/Search/profile") ?>',

此外，使用单引号/双引号声明变量

data    : { 'post': name },

如何发送后输入数据ajax到控制器？

4 个答案: