Javascript 使用Ajax和php将数据加载到boostrap模式

我有一个带有数据行和操作按钮的数据表。我想，当我点击该行相关的动作数据时，数据会从数据库中加载并以模式显示。我曾尝试使用ajax和php来实现这一点，但没有成功

以下是我澄清问题的代码：

js

$（文档）.ready（函数（）{
$（文档）.on（'单击'，'获取详细信息'），函数（e）{
e、 预防默认值（）；
var uid=$（this）.data（'id'）；//获取所单击行的id
$（“#动态内容”）.hide（）；//隐藏加载程序的潜水
$（“#模态加载器”）.show（）；//加载ajax加载器
$.ajax({
url:'ajax\u modal\u view.php'，
键入：“POST”，
数据：“id=”+uid，
数据类型：“json”
})
.完成（功能（数据）{
控制台日志（数据）；
$（“#动态内容”）.hide（）；//隐藏动态div
$（“#动态内容”）.show（）；//显示动态div
$（'#txt_fname'）.html（data.fname）；
$（'#txt_lname'）.html（data.lname）；
$（'txt_email'）.html（data.email）；
$（'txt_disability'）.html（data.disability）；
$（'txt_id'）.html（data.national_id）；
$（'#模态加载器'）.hide（）；//隐藏ajax加载器
})
.fail（函数（）{
$（'.modal body'）.html（'出现问题，请重试…'）；
});
});
});

HTML数据表

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-hover table-bordered dt-responsive nowrap" id="example">

                        <thead>
                        <tr>


                    <th><input type="checkbox" id="checkall" /></th>
                    <th class="text-danger">Name</th>
                    <th class="text-danger">Gender</th>
                    <th class="text-danger">National id</th>
                    <th class="text-danger">Constituency</th>
                    <th class="text-danger">Institution Name</th>
                    <th class="text-danger">YOS</th>
                    <th class="text-danger">Action</th>




                </tr>
                </thead>
                <tbody>
                <?php $query= mysql_query("select * from application_details")or die(mysql_error());

                                    while ($row = mysql_fetch_array($query))
 {

                            ?>
                <tr>
                <td width="30">
                <input id="optionsCheckbox" class="uniform_on" name="selector[]" type="checkbox" value="<?php echo $row['application_id']; ?>">
                </td>


                <td><?php echo $row['fname']." ".$row['mname']." ".$row['lname']; ?></td>
                <td><?php echo $row['gender']; ?></td>
                <td><?php echo $row['national_id']; ?></td>
                <td><?php echo $row['constituency']; ?></td>        
                <td><?php echo $row['institution_name']; ?></td>
                <td><?php echo $row['year_of_study']; ?></td>
                 <td>
                <button data-toggle="modal" data-target="#view" data-id="<?php echo $row['application_id']; ?>" id="getDetails" class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-eye-open"></i></button>

                 <a href="delete_record.php<?php echo '?id='.$row['application_id']; ?>" title="Delete" class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" ><span class="glyphicon glyphicon-trash"></span></a>



                 </td>



                        </tr>
                        <?php } ?>
                        </tbody>

            </table>

名称
性别
国民身份证
选区
机构名称
约斯
行动
我已经解决了我的问题。数据库连接出现问题。
尝试将
id=“getDetails”
更改为
class=“getDetails”
，并将
$（文档）更改为
。在（'click'，'getDetails'，函数（e）{e.preventDefault（）；var uid=$（this）。数据（'id'）；//将被单击行的id
更改为
$（文档）。在（'click'，'getDetails'，函数（e）上{e.preventDefault（）；var uid=$（this.data（'id'）；//获取单击行的id
感谢您的回答@dnviveros。仍然不工作。我正在获取“.fail（function（）{$（'.modal body'））.html（'出现问题，请重试…'）；}），这意味着它不是从ajax_modal_view获取数据。phpy您应该删除此问题
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-hover table-bordered dt-responsive nowrap" id="example">

                        <thead>
                        <tr>


                    <th><input type="checkbox" id="checkall" /></th>
                    <th class="text-danger">Name</th>
                    <th class="text-danger">Gender</th>
                    <th class="text-danger">National id</th>
                    <th class="text-danger">Constituency</th>
                    <th class="text-danger">Institution Name</th>
                    <th class="text-danger">YOS</th>
                    <th class="text-danger">Action</th>




                </tr>
                </thead>
                <tbody>
                <?php $query= mysql_query("select * from application_details")or die(mysql_error());

                                    while ($row = mysql_fetch_array($query))
 {

                            ?>
                <tr>
                <td width="30">
                <input id="optionsCheckbox" class="uniform_on" name="selector[]" type="checkbox" value="<?php echo $row['application_id']; ?>">
                </td>


                <td><?php echo $row['fname']." ".$row['mname']." ".$row['lname']; ?></td>
                <td><?php echo $row['gender']; ?></td>
                <td><?php echo $row['national_id']; ?></td>
                <td><?php echo $row['constituency']; ?></td>        
                <td><?php echo $row['institution_name']; ?></td>
                <td><?php echo $row['year_of_study']; ?></td>
                 <td>
                <button data-toggle="modal" data-target="#view" data-id="<?php echo $row['application_id']; ?>" id="getDetails" class="btn btn-primary btn-xs"><i class="glyphicon glyphicon-eye-open"></i></button>

                 <a href="delete_record.php<?php echo '?id='.$row['application_id']; ?>" title="Delete" class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" ><span class="glyphicon glyphicon-trash"></span></a>



                 </td>



                        </tr>
                        <?php } ?>
                        </tbody>

            </table>

<?php

 header('Content-type: application/json; charset=UTF-8');

     require_once '../dbconnect/dbcon.php';

     if (isset($_POST['id']) && !empty($_POST['id'])) {

         $id = intval($_POST['id']);
         $query = "SELECT * FROM application_details WHERE application_id=:id";
         $stmt = $DBcon->prepare( $query ); 
         $stmt->execute(array(':id'=>$id));
         $row=$stmt->fetch(PDO::FETCH_ASSOC);       
         echo json_encode($row);
         exit; 
     }

  ?>