使用AJAX删除数据行：如何正确传递行ID至AJAX参数

看起来你遇到的核心问题是循环生成表格行时，没给每个删除操作绑定对应的唯一ID——要么是JavaScript没能正确捕获当前要删除行的ID，要么是PHP循环里直接输出$id导致所有删除按钮都复用了最后一行的ID（毕竟PHP执行完循环后，$id会停留在最后一条记录的值上）。下面给你分步解决的方案：

第一步：修正PHP表格输出，为每行/删除按钮绑定唯一ID #

在循环输出表格行时，给删除按钮添加data-id属性存储当前行的id，这样JavaScript能轻松获取对应的值。修改你的PHP代码如下：

$sql = "SELECT id, product_id, price, quantity FROM tbl_cart WHERE member_id = '$member_id' ";
$result = $conn->query($sql);
echo "<table class='anyClass'>";
echo "<tr> <th>ID</th> <th>Product</th> <th>Price</th> <th>Quantity</th> <th>Action</th></tr>";

// 循环输出每一行
while($row = $result->fetch_assoc()) {
    echo "<tr data-row-id='{$row['id']}'>";
    echo "<td>{$row['id']}</td>";
    echo "<td>{$row['product_id']}</td>";
    echo "<td>{$row['price']}</td>";
    echo "<td>{$row['quantity']}</td>";
    // 给删除按钮添加data-id属性，存储当前行的id
    echo "<td><button class='delete-btn' data-id='{$row['id']}'>删除</button></td>";
    echo "</tr>";
}
echo "</table>";

这里的关键细节：

• 用data-id把当前行的唯一id绑定到删除按钮上，确保每个按钮都有专属的ID值
• 给所有删除按钮统一加类名（比如delete-btn），方便批量绑定点击事件

第二步：编写正确的AJAX代码，获取并传递ID #

接下来写JavaScript代码，给每个删除按钮绑定点击事件，获取对应的data-id后发送AJAX请求：

// 给所有删除按钮绑定点击事件
document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // 获取当前按钮对应的行ID
        const deleteId = this.getAttribute('data-id');
        
        // 发送AJAX请求
        fetch('delete-cart-item.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `id=${deleteId}`
        })
        .then(response => response.text())
        .then(data => {
            // 请求成功后，移除对应的表格行
            if(data === 'success') {
                this.closest('tr').remove();
            } else {
                alert('删除失败，请重试');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('请求出错');
        });
    });
});

如果习惯用jQuery，代码可以简化成：

$('.delete-btn').click(function() {
    const deleteId = $(this).data('id');
    $.post('delete-cart-item.php', {id: deleteId}, function(data) {
        if(data === 'success') {
            $(this).closest('tr').remove();
        } else {
            alert('删除失败');
        }
    });
});

第三步：修正后台PHP的删除逻辑（重要！防SQL注入） #

最后，后台的delete-cart-item.php要正确接收ID，并且必须用预处理语句防止SQL注入（你的原代码直接把变量拼进SQL，有很大安全风险）：

// 假设这里已经有数据库连接$conn
if(isset($_POST['id']) && is_numeric($_POST['id'])) {
    $deleteId = $_POST['id'];
    
    // 使用预处理语句，避免SQL注入
    $stmt = $conn->prepare("DELETE FROM tbl_cart WHERE id = ?");
    $stmt->bind_param("i", $deleteId); // "i"表示整数类型
    
    if($stmt->execute()) {
        echo 'success';
    } else {
        echo 'error';
    }
    $stmt->close();
} else {
    echo 'invalid_id';
}

为什么之前的方法会出错？ #

• 直接用PHPecho $id给所有按钮赋值：PHP循环执行时，$id会不断被覆盖，最终所有按钮的ID都是最后一行的ID，所以会删错行。
• JavaScript没正确获取ID：如果之前没给按钮绑定唯一标识，JS可能无法区分点击的是哪一行的按钮，导致传参错误或者没传参，所以目标行没被删除。

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