在codeignitor中的ajax请求之后显示数据

时间:2018-10-08 13:49:25

标签: php ajax codeigniter

我正在使用ajax请求从数据库中获取数据。我要做的就是每当我们从选项列表中选择一个选项时,以表格形式显示结果。我也可以这样做,但是当我选择另一个选项时,不会从表中删除前一个选项的视图。

查看:

 $('#city').on('change',function(){
        var cityID = $(this).val();
         //   alert(cityID);
         $.ajax({
          type:'POST',
          url:'<?php echo base_url('bank/getBranchDetail'); ?>',
          data:'city_id='+cityID,
          success:function(data){
           var dataObj = jQuery.parseJSON(data);
           $(dataObj).each(function(){
           var ifsc = $('<p />');
           var micr = $('<p />');
           var contact = $('<p />');
           var address = $('<p />');
           // alert(option);
           ifsc.attr('value', this.id).text(this.ifsc_code);  
           micr.attr('value', this.id).text(this.micr_code); 
           contact.attr('value', this.id).text(this.contact_no);
           address.attr('value', this.id).text(this.address); 
           $('#ifsc').append(ifsc);
           $('#micr').append(micr);
           $('#contact').append(contact);
           $('#address').append(address);
         });
          //  $('#hodm_results').html(data);
      }
    }); 
});

<table class="table  table-bordered table-hover table-full-width" id="table_userinfo">
                <thead>
                <tr>
                    <th>IFSC Code</th>
                    <th>MICR Code</th>
                    <th>Contact No.</th>
                    <th>Address</th>
                </tr>
                <tr>
                    <td id="ifsc"></td>
                    <td id="micr"></td>
                    <td id="contact"></td>
                    <td id="address"></td>
                </tr>
                </thead>
                </table>

控制器:

public function getBranchDetail(){
    $branch = array();
    $city_id = $this->input->post('city_id');
    if($city_id){
        $con['conditions'] = array('id'=>$city_id);
        $branchData = $this->Bank_model->getBranchData($con);
    }
    echo json_encode($branchData);
}

型号:

function getBranchData($params = array()){
    $this->db->select('c.micr_code, c.ifsc_code, c.contact_no, c.address');
    $this->db->from($this->branchTbl.' as c');

    //fetch data by conditions
    if(array_key_exists("conditions",$params)){
        foreach ($params['conditions'] as $key => $value) {
            if(strpos($key,'.') !== false){
                $this->db->where($key,$value);
            }else{
                $this->db->where('c.'.$key,$value);
            }
        }
    }

    $query = $this->db->get();
    $result = ($query->num_rows() > 0)?$query->result_array():FALSE;

    //return fetched data
    return $result;
}

当我从选项中选择一个城市时,它显示的是该城市的结果,但当我从选项中选择另一个城市时,它也显示了结果,但前一个选项的结果并未从中删除。表。如果要选择其他选项,我想删除以前的记录。

1 个答案:

答案 0 :(得分:1)

检查以下代码(未测试)。在循环中添加数据之前,请先清除内容。

$('#city').on('change',function(){
        var cityID = $(this).val();
         //   alert(cityID);
         $.ajax({
          type:'POST',
          url:'<?php echo base_url('bank/getBranchDetail'); ?>',
          data:'city_id='+cityID,
          success:function(data){
           var dataObj = jQuery.parseJSON(data);

           // clear the data before appending

           $('#ifsc').html("");
           $('#micr').html("");
           $('#contact').html("");
           $('#address').html("");

           $(dataObj).each(function(){
           var ifsc = $('<p />');
           var micr = $('<p />');
           var contact = $('<p />');
           var address = $('<p />');
           // alert(option);
           ifsc.attr('value', this.id).text(this.ifsc_code);  
           micr.attr('value', this.id).text(this.micr_code); 
           contact.attr('value', this.id).text(this.contact_no);
           address.attr('value', this.id).text(this.address); 
           $('#ifsc').append(ifsc);
           $('#micr').append(micr);
           $('#contact').append(contact);
           $('#address').append(address);
         });
          //  $('#hodm_results').html(data);
      }
    }); 
});

<table class="table  table-bordered table-hover table-full-width" id="table_userinfo">
                <thead>
                <tr>
                    <th>IFSC Code</th>
                    <th>MICR Code</th>
                    <th>Contact No.</th>
                    <th>Address</th>
                </tr>
                <tr>
                    <td id="ifsc"></td>
                    <td id="micr"></td>
                    <td id="contact"></td>
                    <td id="address"></td>
                </tr>
                </thead>
                </table>