使用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

&nbsp;$(document).ready(function(){&nbsp;&nbsp;&nbsp; $('.view_data').click(function(){&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;var id = $(this).attr("id");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;console.log(id);&nbsp; });&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>&nbsp; <button class="btn btn-primary view_data" id="1" >VIEW FULL INFO</button>&nbsp;查看代码：&nbsp; &nbsp;<tr>&nbsp; &nbsp;<td>&nbsp; <button class="btn btn-primary view_data" id="<?php echo $e->id; ?>" ><i class="icon-eye-open">VIEW FULL INFO</i></button>&nbsp; </td></tr>&nbsp;引导模态代码：-<div id="dataModal" class="modal fade">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; <div class="modal-dialog modal-xl">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div class="modal-content">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button type="button" class="close" data-dismiss="modal">&times;</button>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h4 class="modal-title">VIEW FULL INFO</h4>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body" id="your_modal_detail">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-footer">&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp;&nbsp;</div>JQUERY AJAX 代码：-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>&nbsp;&nbsp;&nbsp;$(document).ready(function(){&nbsp;&nbsp;&nbsp; $('.view_data').click(function(){&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;var id = $(this).attr("id");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;$.ajax({&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url : "<?php echo base_url('ControllerName/get_Full_data') ?>",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type:"POST",&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data:{id:id},&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //alert(data);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('#your_modal_detail').html(data);&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('#dataModal').modal("show");&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;});&nbsp;&nbsp;&nbsp; });&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;</script>控制器代码：-<?phpdefined('BASEPATH') OR exit('No direct script access allowed');class ControllerName extends CI_Controller {public function get_Full_data(){&nbsp; &nbsp; &nbsp; $id = $this->input->post("id");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $this->load->YourModelName();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;$data['fullData'] = $this->YourModelName->getDatainModal($id);$this->load->view('datainModal',$data);&nbsp; }}?>模态代码：-<?phpclass YourModelName extends CI_Model {function getDatainModal($id){return $fullData = $this->db->get_where('table_name',array('id'=>$id))->row();&nbsp;}&nbsp; &nbsp;}?>在查看 datainModal.php 中创建：-<div class="table-responsive">&nbsp;<table class="table table-bordered">&nbsp;&nbsp; &nbsp; <div class='row col-md-12'>&nbsp; &nbsp; &nbsp;<div class='col-md-6'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td width="30%"><label>Id</label></td>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td width="70%"><?php echo $fullData->id;?></td>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; <div class='col-md-6'>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td width="30%"><label>Data & Time</label></td>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td width="70%"><?php echo&nbsp; $fullData->date_and_time;?></td>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;</div></table></div>&nbsp;&nbsp;