使用ajax在codeigniter中按特定id查看模式中的完整数据

Question

我想通过 AJAX 和 JQUERY 查看每个联系人的详细信息在此我从数据库中获取列表中的所有联系人数据。但问题是在 datail 中的弹出窗口中显示数据。就像当我点击它应该通过使用特定的 ID 关闭选项来显示包含所有详细信息的弹出窗口我的控制器功能：-public function get_Full_data()    {        $id = $this->input->post("id");        //echo $id; exit;          $data['fullData'] = $this->contactus_model->view($id);        $this->load->view('admin/datainModal',$data);    }我的模型功能：-public function view($id)        {            $res = $this->db->get_where("contactus",array('id'=>$id));            return $res->row();        }查看页面 datainModal.php :-<div class="table-responsive"> <table class="table table-bordered">     <div class='row col-md-12'>     <div class='col-md-6'>           <tr>             <td width="30%"><label>Id</label></td>               <td width="70%"><?php echo $fullData->id;?></td>            </tr>         </div>  <div class='col-md-6'>                 <tr>             <td width="30%"><label>Data & Time</label></td>               <td width="70%"><?php echo  $fullData->date_and_time;?></td>            </tr>       </div>          </div></table></div>  

Answer 1

 $(document).ready(function(){  

  $('.view_data').click(function(){  

       var id = $(this).attr("id");  

       console.log(id);

  });  

 });  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <button class="btn btn-primary view_data" id="1" >VIEW FULL INFO</button>

 

查看代码：

   <tr>

   <td>

  <button class="btn btn-primary view_data" id="<?php echo $e->id; ?>" ><i class="icon-eye-open">VIEW FULL INFO</i></button>

  </td>

</tr> 

引导模态代码：-

<div id="dataModal" class="modal fade">  

      <div class="modal-dialog modal-xl">  

           <div class="modal-content">  

                <div class="modal-header">  

                     <button type="button" class="close" data-dismiss="modal">&times;</button>  

                     <h4 class="modal-title">VIEW FULL INFO</h4>  

                </div>  

                <div class="modal-body" id="your_modal_detail">  

                </div>  

                <div class="modal-footer">  

                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  

                </div>  

           </div>  

      </div>  

 </div>

JQUERY AJAX 代码：-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>  

 $(document).ready(function(){  

  $('.view_data').click(function(){  

       var id = $(this).attr("id");  

       $.ajax({  

            url : "<?php echo base_url('ControllerName/get_Full_data') ?>", 

            type:"POST",  

            data:{id:id},  

            success:function(data){

            //alert(data);  

             $('#your_modal_detail').html(data);  

             $('#dataModal').modal("show");  

            }  

       });  

  });  

 });  

</script>

控制器代码：-

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class ControllerName extends CI_Controller {

public function get_Full_data(){

      $id = $this->input->post("id");

          

          $this->load->YourModelName();

          

 $data['fullData'] = $this->YourModelName->getDatainModal($id);

$this->load->view('datainModal',$data);

  }

}

?>

模态代码：-

<?php

class YourModelName extends CI_Model {

function getDatainModal($id){

return $fullData = $this->db->get_where('table_name',array('id'=>$id))->row(); 

}   

}

?>

在查看 datainModal.php 中创建：-

<div class="table-responsive">

 <table class="table table-bordered"> 

    <div class='row col-md-12'>

     <div class='col-md-6'>

           <tr>

             <td width="30%"><label>Id</label></td>  

             <td width="70%"><?php echo $fullData->id;?></td>  

          </tr> 

        </div>

  <div class='col-md-6'>       

          <tr>

             <td width="30%"><label>Data & Time</label></td>  

             <td width="70%"><?php echo  $fullData->date_and_time;?></td>  

          </tr>

       </div>   

       </div>

</table>

</div>