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

【问题标题】：Display data after ajax request in codeigniter在codeigniter中显示ajax请求后的数据
【发布时间】：2019-03-13 05:07:30
【问题描述】：

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

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

【问题讨论】：

因为你从不清表，只追加数据。这就是为什么之前的数据仍然存在。
@BilalAkbar 你能帮我怎么做吗？

标签： php ajax codeigniter

【解决方案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>

【讨论】：