PHP数据获取故障：点击按钮仅表格首行数据显示至#datacontainer

这个问题其实很常见——你在循环生成表格行的时候重复使用了相同的ID，而HTML规范里ID必须是唯一的，这就导致你的JS只能拿到页面上第一个匹配该ID的元素，所以只有第一行能正常工作。下面是一步步的修复方案：

1. 修正HTML表格的重复ID问题 #

把循环里的重复ID改成类名，同时给点击按钮传递当前元素的引用，这样就能定位到对应行的ID：

<table>
  <tr>
    <th width="15%;">Image</th>
    <th width="0">ID</th>
    <th width="50%;">Name</th>
    <th>Action</th>
  </tr>
  <?php while ($row = mysqli_fetch_array($accounts)) { ?>
  <tr>
    <td><img src="images/<?php echo $row['image']; ?>"></td>
    <td>
      <?php echo $row['id']; ?>
      <!-- 把id改成class，同时隐藏输入框（不需要显示） -->
      <input type="text" class="text_id" value="<?php echo $row['id']; ?>" style="display:none;">
    </td>
    <td><?php echo $row['lastname']; ?>, <?php echo $row['firstname']; ?></td>
    <td>
      <!-- 去掉重复id，把当前按钮作为参数传给chk函数 -->
      <i class="fab fa-reddit-alien" onclick="chk(this)"></i>
      <i class="far fa-edit" style="margin: 0 7% 0 7%;"></i>
      <i class="fas fa-trash"></i>
    </td>
  </tr>
  <?php } ?>
</table>
<div id="datacontainer"></div>

2. 更新JS函数，通过按钮定位对应行的ID #

修改chk函数，利用传入的按钮元素找到它所在的表格行，再获取该行的ID值：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function chk(btn) {
  $("#datacontainer").slideToggle(300);
  // 通过按钮找到所在行，再获取该行的ID输入框值
  var id = $(btn).closest('tr').find('.text_id').val();
  var dataString = 'id='+ id;
  
  $.ajax({
    type: "post",
    url: "showdata.php",
    data: dataString,
    cache: false,
    success: function(data){
      $("#datacontainer").html(data);
    }
  });
  return false;
}
</script>

3. 修复PHP的SQL注入风险（必做！） #

你的showdata.php直接把用户传入的ID拼到SQL里，存在严重的注入漏洞，改用预处理语句修复：

<?php
$db = mysqli_connect('localhost', 'root', '', 'psbr');
if (isset($_POST['id'])) {
  $id = $_POST['id'];
  // 使用预处理语句防止SQL注入
  $stmt = $db->prepare("SELECT * from accounts where id = ?");
  $stmt->bind_param("i", $id); // "i"表示参数是整数类型
  $stmt->execute();
  $accounts = $stmt->get_result();
}
?>
<table>
  <?php while ($row = mysqli_fetch_array($accounts)) { ?>
  <tr>
    <td class="w"><h1>Name</h1></td>
  </tr>
  <tr>
    <td><?php echo $row['lastname']; ?></td>
  </tr>
  <?php } ?>
</table>
<style type="text/css">
.w { font-size: 12vh; }
</style>

这样修改后，点击每一行的按钮都会获取到对应行的ID，AJAX请求就能正确拉取并展示对应的数据了。

内容的提问来源于stack exchange，提问作者Spencer Sanchez