点击bootstrap-table按钮删除行及同步删除MySQL数据问题求助

一、核心问题排查 #

1. 前端字段缺失：Bootstrap Table的remove方法依赖id字段匹配行数据，但你的原代码未确保表格数据源中包含id字段（即使不显示也需要保留）。
2. SQL注入风险：直接拼接用户输入到SQL语句中，不仅不安全，还可能因数据类型不匹配导致删除失败。
3. 无错误处理机制：前端未处理AJAX请求失败场景，也未验证后端响应结果；后端未返回标准化响应格式，导致前端无法准确判断删除状态。

二、修正后的完整代码 #

1. 前端JavaScript代码 #

var $table = $('#table');
$table.bootstrapTable({
    url: 'book-list.php',
    search: true,
    pagination: true,
    buttonsClass: 'primary',
    showFooter: true,
    minimumCountColumns: 2,
    columns: [
        {
            field: 'num',
            title: '#',
            sortable: true,
        },
        {
            field: 'first',
            title: 'Book Title',
            sortable: true,
        },
        {
            field: 'second',
            title: 'Borrower',
            sortable: true,
        },
        {
            field: 'third',
            title: 'Issue Date',
            sortable: true,
        },
        // 新增隐藏id字段，确保表格数据中保留id用于匹配删除
        {
            field: 'id',
            visible: false
        },
        {
            field: 'fourth',
            title: 'Action',
            sortable: false,
            formatter: function(value, row, index) {
                return '<button class="btn btn-danger delete-btn" data-id="' + row.id + '">Delete</button>';
            },
            events: {
                'click .delete-btn': function(e, value, row, index) {
                    if(confirm('确定要删除这条记录吗？')){
                        var id = row.id;
                        $.ajax({
                            type: 'POST',
                            url: 'delete.php',
                            data: {id: id},
                            dataType: 'json',
                            success: function(response) {
                                if(response.status === 'success'){
                                    $table.bootstrapTable('remove', {
                                        field: 'id',
                                        values: [id]
                                    });
                                    alert('删除成功');
                                } else {
                                    alert('删除失败: ' + response.msg);
                                }
                            },
                            error: function(xhr) {
                                alert('请求失败，请检查后端服务');
                                console.error(xhr.responseText);
                            }
                        });
                    }
                }
            }
        }
    ]
});

2. 后端PHP代码（delete.php） #

<?php
// 填写实际数据库连接信息
$servername = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "your_db_name";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    echo json_encode(['status' => 'error', 'msg' => '数据库连接失败: ' . $conn->connect_error]);
    exit;
}

// 验证ID合法性
if(!isset($_POST['id']) || !is_numeric($_POST['id'])){
    echo json_encode(['status' => 'error', 'msg' => '无效的记录ID']);
    exit;
}

$id = intval($_POST['id']);

// 使用预处理语句防止SQL注入
$sql = "DELETE FROM borrowed_books WHERE id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $id);

if ($stmt->execute()) {
    if($stmt->affected_rows > 0){
        echo json_encode(['status' => 'success', 'msg' => '删除成功']);
    } else {
        echo json_encode(['status' => 'error', 'msg' => '未找到要删除的记录']);
    }
} else {
    echo json_encode(['status' => 'error', 'msg' => '删除失败: ' . $stmt->error]);
}

$stmt->close();
$conn->close();
?>

三、必做检查项 #

• 确认book-list.php返回数据：必须包含id字段，示例JSON结构：

  [
      {"id":1, "num":1, "first":"Book1", "second":"John", "third":"2024-01-01"},
      {"id":2, "num":2, "first":"Book2", "second":"Jane", "third":"2024-01-02"}
  ]
  

• 浏览器调试：按F12打开开发者工具，在Network标签页查看AJAX请求的状态码和响应内容，确认请求是否正常到达后端。
• 数据库权限：确保数据库账号拥有DELETE权限，且borrowed_books表的id字段为有效主键或索引。

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