如何通过PHP GET请求打开Bootstrap Off-Canvas并获取请求数据

1. 页面刷新模式（适配当前GET请求逻辑） #

点击编辑按钮后页面会刷新，URL携带edit=item_id参数，直接在edit_album_item.php中通过PHP获取参数并填充数据到Off-Canvas即可。

步骤1：完善edit_album_item.php代码 #

<?php
// 初始化数据变量
$item_id = '';
$item_title = '';
$item_description = '';
$item_image = '';

// 读取GET参数并查询数据
if(isset($_GET['edit'])) {
    $item_id = $_GET['edit'];
    // 替换为你的数据库查询逻辑，根据item_id获取对应相册项数据
    // 示例（PDO写法）：
    // $pdo = new PDO("mysql:host=localhost;dbname=your_db", "username", "password");
    // $stmt = $pdo->prepare("SELECT * FROM album_items WHERE id = ?");
    // $stmt->execute([$item_id]);
    // $item = $stmt->fetch(PDO::FETCH_ASSOC);
    // if($item) {
    //     $item_title = $item['title'];
    //     $item_description = $item['description'];
    //     $item_image = $item['image'];
    // }
}
?>

<!-- Bootstrap Off-Canvas 容器 -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAlbum" aria-labelledby="offcanvasAlbumLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasAlbumLabel">编辑相册项</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <?php if(!empty($item_id)): ?>
        <!-- 编辑表单，填充获取到的数据 -->
        <form action="update_album_item.php" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="item_id" value="<?php echo htmlspecialchars($item_id); ?>">
            
            <div class="mb-3">
                <label for="item_title" class="form-label">标题</label>
                <input type="text" class="form-control" id="item_title" name="item_title" value="<?php echo htmlspecialchars($item_title); ?>" required>
            </div>
            
            <div class="mb-3">
                <label for="item_description" class="form-label">描述</label>
                <textarea class="form-control" id="item_description" name="item_description" rows="3" required><?php echo htmlspecialchars($item_description); ?></textarea>
            </div>
            
            <div class="mb-3">
                <label for="item_image" class="form-label">当前图片</label>
                <img src="includes/images/<?php echo htmlspecialchars($item_image); ?>" class="img-fluid mb-2" style="max-height: 150px;" alt="当前图片">
                <input class="form-control" type="file" id="item_image" name="item_image" accept="image/*">
                <small class="text-muted">不选择则保留原图片</small>
            </div>
            
            <button type="submit" class="btn btn-primary">保存修改</button>
        </form>
    <?php else: ?>
        <p>请选择一个要编辑的相册项</p>
    <?php endif; ?>
  </div>
</div>

步骤2：优化主页面编辑按钮 #

保留原有逻辑，添加语义化属性增强可用性：

<a href="index.php?edit=<?php echo $item_id; ?>#offcanvasAlbum" 
   data-bs-toggle="offcanvas" 
   data-bs-target="#offcanvasAlbum" 
   aria-controls="offcanvasAlbum"
   role="button">
    <button class="btn btn-warning delete-card"><i class="fas fa-edit"></i></button>
</a>

2. 无刷新模式（AJAX优化方案） #

如果不想页面刷新，可通过JS拦截点击事件，异步获取数据并填充到Off-Canvas：

步骤1：修改主页面编辑按钮 #

移除href，添加自定义data-item-id属性：

<button class="btn btn-warning delete-card edit-btn" 
        data-item-id="<?php echo $item_id; ?>"
        data-bs-toggle="offcanvas" 
        data-bs-target="#offcanvasAlbum" 
        aria-controls="offcanvasAlbum">
    <i class="fas fa-edit"></i>
</button>

步骤2：调整edit_album_item.php为静态结构 #

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAlbum" aria-labelledby="offcanvasAlbumLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasAlbumLabel">编辑相册项</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body" id="offcanvas-content">
    <div class="text-center">
        <div class="spinner-border" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
    </div>
  </div>
</div>

步骤3：添加AJAX处理脚本 #

document.querySelectorAll('.edit-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const itemId = this.getAttribute('data-item-id');
        const contentContainer = document.getElementById('offcanvas-content');
        
        fetch(`get_album_item.php?id=${itemId}`)
            .then(res => res.json())
            .then(data => {
                if(data.success) {
                    contentContainer.innerHTML = `
                        <form action="update_album_item.php" method="POST" enctype="multipart/form-data">
                            <input type="hidden" name="item_id" value="${data.item.id}">
                            
                            <div class="mb-3">
                                <label for="item_title" class="form-label">标题</label>
                                <input type="text" class="form-control" id="item_title" name="item_title" value="${data.item.title}" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="item_description" class="form-label">描述</label>
                                <textarea class="form-control" id="item_description" name="item_description" rows="3" required>${data.item.description}</textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label for="item_image" class="form-label">当前图片</label>
                                <img src="includes/images/${data.item.image}" class="img-fluid mb-2" style="max-height: 150px;" alt="当前图片">
                                <input class="form-control" type="file" id="item_image" name="item_image" accept="image/*">
                                <small class="text-muted">不选择则保留原图片</small>
                            </div>
                            
                            <button type="submit" class="btn btn-primary">保存修改</button>
                        </form>
                    `;
                } else {
                    contentContainer.innerHTML = `<p class="text-danger">加载失败：${data.message}</p>`;
                }
            })
            .catch(err => {
                contentContainer.innerHTML = `<p class="text-danger">请求出错：${err.message}</p>`;
            });
    });
});

步骤4：创建get_album_item.php数据接口 #

<?php
header('Content-Type: application/json');

if(!isset($_GET['id'])) {
    echo json_encode(['success' => false, 'message' => '缺少相册项ID']);
    exit;
}

$item_id = $_GET['id'];
// 替换为实际数据库查询逻辑
$item = [
    'id' => $item_id,
    'title' => '示例标题',
    'description' => '示例描述',
    'image' => 'example.jpg'
];

if($item) {
    echo json_encode(['success' => true, 'item' => $item]);
} else {
    echo json_encode(['success' => false, 'message' => '未找到对应相册项']);
}
?>

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