在codeigniter中显示ajax请求后的数据

Question

我正在使用 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;
}

当我从选项中选择一个城市时，它会向我显示该城市的正确结果。 当我从选项中选择另一个城市时，它也会显示结果，但前一个选项的结果不会从表中删除。 当我选择另一个选项时，我想删除以前的记录。

Answer 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>