Ajax请求无法返回正确响应，点击按钮始终获取最后一条ID

点击「Info client」按钮时，需要展示对应行客户的详细信息，但目前点击后总是获取最后一条数据的ID，而非点击行的ID，相关代码如下：

HTML代码 #

<div>
    <table id="list_client" border=1>
      <tr>
        <td>#</td>
        <td>Nom</td>
      </tr>
      <?php
      require 'config.php';
      $clients = $db->query('SELECT * FROM client');
        
      foreach ($clients as $client) : ?>
      <tr id="<?php echo $client["id_client"]; ?>">
        <td><?php echo $client["id_client"]; ?></td>
        <td><?php echo $client["nom_client"]; ?></td>
        <td><button name="info" id="info" type="button" onclick="display_info(<?php echo $client['id_client']; ?>);">Info client</button></td>
        <td><button type="button" onclick="hide_info(<?php echo $client['id_client']; ?>);">Masquer client</button></td>
      <?php endforeach; ?>
    </table>
  </div>

JavaScript及Ajax请求代码 #

function display_info() {
    $("#info").click(function () {
        var datas = {
            action: "read",
            id_client: $("#id_client").val(),
        };
        $.ajax({
            type: "GET",
            url: "function.php",
            async: true,
            data: datas,
            dataType: "json",
            cache: false,
        }).done(function (result) {
            console.log("result");
            $("#result").text("response : " + JSON.stringify($result));
        });
    });
}

PHP函数代码 #

function read() {
    global $db;

    $id_client = $_GET['id_client'];

    $client = "SELECT * FROM client WHERE id_client = '$id_client'";
    $query = $db->prepare($client);
    $query->bindValue(':id_client', $id_client, PDO::PARAM_INT);
    $query->execute();
    $result = $query->fetch();
    echo json_encode($result);
}

问题根源 #

1. 重复ID冲突：循环生成的按钮都使用了id="info"，HTML中ID必须唯一，通过$("#info")选择元素时只会匹配最后一个按钮，导致所有点击事件都绑定到最后一个按钮上。
2. 函数逻辑混乱：display_info函数既通过onclick接收了ID参数，又在内部重复绑定click事件，且未使用传入的参数，反而去获取不存在的#id_client元素值，完全偏离需求。
3. SQL语句错误：SQL中用字符串拼接'$id_client'，却又尝试绑定:id_client参数，两者不匹配导致参数绑定无效，还存在SQL注入风险。

修复方案 #

1. 修正HTML（移除重复ID）

<div>
    <table id="list_client" border=1>
      <tr>
        <td>#</td>
        <td>Nom</td>
      </tr>
      <?php
      require 'config.php';
      $clients = $db->query('SELECT * FROM client');
        
      foreach ($clients as $client) : ?>
      <tr id="<?php echo $client["id_client"]; ?>">
        <td><?php echo $client["id_client"]; ?></td>
        <td><?php echo $client["nom_client"]; ?></td>
        <!-- 移除重复的id="info"，保留onclick传参 -->
        <td><button name="info" type="button" onclick="display_info(<?php echo $client['id_client']; ?>);">Info client</button></td>
        <td><button type="button" onclick="hide_info(<?php echo $client['id_client']; ?>);">Masquer client</button></td>
      <?php endforeach; ?>
    </table>
    <!-- 新增结果展示容器 -->
    <div id="result"></div>
  </div>

2. 重写JavaScript函数（直接使用传入的ID）

function display_info(id_client) {
    var datas = {
        action: "read",
        id_client: id_client // 使用onclick传入的对应行ID
    };
    $.ajax({
        type: "GET",
        url: "function.php",
        async: true,
        data: datas,
        dataType: "json",
        cache: false,
    }).done(function (result) {
        console.log(result);
        $("#result").text("response : " + JSON.stringify(result)); // 修正$result的语法错误
    }).fail(function(xhr, status, error) {
        // 添加错误处理，方便调试
        console.error("请求失败:", error);
        $("#result").text("请求出错: " + error);
    });
}

3. 修复PHP SQL语句（正确使用参数绑定）

function read() {
    global $db;

    // 校验参数是否存在
    if (!isset($_GET['id_client']) || !is_numeric($_GET['id_client'])) {
        echo json_encode(['error' => '参数无效或缺失']);
        return;
    }

    $id_client = $_GET['id_client'];

    // 使用占位符:id_client，避免字符串拼接
    $client = "SELECT * FROM client WHERE id_client = :id_client";
    $query = $db->prepare($client);
    $query->bindValue(':id_client', $id_client, PDO::PARAM_INT);
    $query->execute();
    $result = $query->fetch(PDO::FETCH_ASSOC); // 指定返回关联数组
    echo json_encode($result);
}

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