将 php echo $row 数据显示为 bootstrap 模态形式

Question

我目前有以下数据表来显示数据库中的联系人列表。在每一行中，我还插入了一个 "Edit" & "Delete" 按钮，并在单击按钮时将 data-id="<?=$row['id']?>" 传递给 jQuery 以进行处理。单击按钮时，通过 ajax，我将从 getcontact.php 获取数据并将其设置为模态表单中的相应输入，但数据似乎并未显示在表单值中。请问我哪里做错了吗？

tables.php

<table width="100%" class="display table table-striped table-bordered table-hover" id="contactsTable">
                            <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Company</th>
                                        <th>Position</th>
                                        <th>Phone</th>
                                        <th>Email</th>
                                        <th>Gender</th>
                                        <th>Date Registered</th>
                                        <th>Edit</th>
                                        <th>Delete</th>
                                    </tr>
                            </thead>
                            <tbody>
                            <?php
                                while($row = mysqli_fetch_array($result)){
                                    ?>
                                    <tr>
                                        <td><?=$row['id']?></td>
                                        <td><?=$row['name']?></td>
                                        <td><?=$row['company']?></td>
                                        <td><?=$row['position']?></td>
                                        <td><?=$row['phone']?></td>
                                        <td><?=$row['email']?></td>
                                        <td><?=$row['gender']?></td>
                                        <td><?=$row['dateregistered']?></td>
                                        <td>
       <!-- Edit Button trigger modal -->
        <button id="editButton" type="button" class="btn btn-primary" datatoggle="modal" data-target="#editModal" data-id="<?=$row['id']?>">
            Edit
            </button>

                                        </td>
                                        <td>
            <!-- Delete Button trigger modal -->
           <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal" data-id="<?=$row['id']?>">
             Delete
           </button>
                                        </td>
                                    </tr>
                                <?php
                                }
                            ?>
                            </tbody>
                        </table>

模态（与tables.php在同一页面）

    <!-- Edit Contact Modal -->
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria labelledby="myModalLabel">
   <div class="modal-dialog" role="document">
    <div class="modal-content">
     <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Edit Contact</h4>
  </div>
  <div class="modal-body">
    <form class="form-horizontal" method="POST" id="editForm" role="form">
                <div class="form-group animated fadeIn">
                    <label for="nameInput" class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-10">
                    <input type="name" name="name" class="form-control" id="nameInput" placeholder="Name" required>
                    </div>
                </div>

                <div class="form-group animated fadeIn">
                    <label for="companyInput" class="col-sm-2 control-label">Company</label>
                    <div class="col-sm-10">
                    <input type="company" name="company" class="form-control" id="companyInput" placeholder="Company" required>
                    </div>
                </div>

                <div class="form-group animated fadeIn">
                    <label for="posInput" class="col-sm-2 control-label">Position</label>
                    <div class="col-sm-10">
                    <input type="position" name="position" class="form-control" id="posInput" placeholder="Position/Job Title">
                    </div>
                </div>

                <div class="form-group animated fadeIn">
                    <label for="contactInput" class="col-sm-2 control-label">Contact Number</label>
                    <div class="col-sm-10">
                    <input type="number" name="contact" class="form-control" id="contactInput" placeholder="Office/Mobile Number" data-error="Please enter a valid mobile number" required>
                    </div>
                </div>

                <div class="form-group animated fadeIn">
                    <label for="emailInput" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                    <input type="email" name="email" class="form-control" id="emailInput" placeholder="Email Address">
                    </div>
                </div>

                <div class="form-group animated fadeIn">
                    <label for="genderInput" class="col-sm-2 control-label">Gender</label>
                    <div class="col-sm-10">
                    <input type="gender" name="gender" class="form-control" id="genderInput" placeholder="Male/Female">
                    </div>
                </div>
                </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button id="editContact" type="button" class="btn btn-primary">Save</button>
  </div>
  </form>
</div>

jQuery

$("#editButton").click(function(e){

 e.preventDefault();

 var uid = $(this).data('id'); // get id of clicked row

 $.ajax({
      url: 'getcontact.php',
      type: 'POST',
      data: 'id='+uid,
      dataType: 'json',
      success: function(response){
          $("#nameInput").val(result[0]);
          $("#companyInput").val(result[1]);
          $("#posInput").val(result[2]);
          $("#contactInput").val(result[3]);
          $("#emailInput").val(result[4]);
          $("#genderInput").val(result[5]);
      }
}); 
});

getcontact.php

<?php
 include("dbconnect.php");

 $id = $_POST['id'];

 $result = mysqli_query($link, "SELECT * FROM businesscontact WHERE id=$id");
 $rows = array();

while($row = mysqli_fetch_array($result)){
$rows[] = $row['*'];
}

echo json_encode($rows);
?>

Answer 1

1 - 您正在从您的 php 文件发送编码的 json 并直接从您的 javascript 代码中使用它，这可以说是无效的，

2 - 您错误地使用 ajax 将数据对象发送到 php，应该如下所示 data: {id: uid},

3 - 您声明了错误的 data-id ，它应该如下所示：var uid = $(this).attr('data-id');

您需要 decode 您的 json 回复如下：

var uid = $(this).attr('data-id');
$.ajax({
    url: 'getcontact.php',
    method: 'POST',
    data: {id: uid},
    success: function(response){
    var result = JSON && JSON.parse(response) || $.parseJSON(response);
    ...
    // rest of your code
    ...

更新

你在这部分有问题：

while($row = mysqli_fetch_array($result)){
    $rows[] = $row['*'];
}

要添加整个数组，您需要执行以下操作：

while($row = mysqli_fetch_array($result)){
    $rows[] = $row;
}

将 php echo $row 数据显示为 bootstrap 模态形式

Displaying php echo $row data into bootstrap modal form

javascript

php

ajax

jquery

bootstrap-modal

更新