Laravel+jQuery实现：检查数据库指定行是否存在并更新进度条

首先得明确：前端没法直接操作数据库，所以我们需要先写一个后端接口来完成Droplets表的查询，再通过jQuery调用这个接口，根据返回结果控制进度条。下面是具体实现步骤：

1. 编写后端查询接口（以PHP为例） #

这个接口负责接收webshop_id参数，查询数据库中是否存在对应行，返回布尔值或者状态码。记得用预处理语句防止SQL注入：

<?php
// 假设已经完成数据库连接（PDO示例）
$pdo = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');

// 获取前端传递的webshop_id
$webshopId = $_GET['webshop_id'] ?? null;

if ($webshopId) {
    // 预处理查询，避免SQL注入
    $stmt = $pdo->prepare("SELECT COUNT(*) FROM Droplets WHERE Webshop_id = ?");
    $stmt->execute([$webshopId]);
    $count = $stmt->fetchColumn();
    
    // 返回结果：存在则返回true，否则false
    echo json_encode(['exists' => $count > 0]);
} else {
    echo json_encode(['error' => '缺少webshop_id参数']);
}
?>

2. 前端jQuery逻辑实现 #

假设你的进度条结构是Bootstrap风格的（其他风格可类比调整）：

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

然后用jQuery发起请求，根据后端返回结果调整进度条：

// 替换成你需要检查的目标webshop_id
const targetWebshopId = 123;

$.ajax({
    url: 'your-backend-api.php', // 替换成你实际的后端接口地址
    type: 'GET',
    data: { webshop_id: targetWebshopId },
    dataType: 'json',
    success: function(response) {
        if (response.exists) {
            // 存在对应行，将进度条跳至30%
            $('.progress-bar').width('30%');
            $('.progress-bar').attr('aria-valuenow', 30);
            // 可选：给进度条加上文本提示
            $('.progress-bar').text('30%');
        }
        // 不存在的话什么都不做，保持原进度状态
    },
    error: function(xhr, status, error) {
        // 处理请求失败的情况，比如网络错误
        console.error('查询数据库失败:', error);
    }
});

关键注意事项 #

• SQL注入防护：后端一定要用预处理语句，绝对不能直接拼接SQL字符串，避免安全风险。
• 进度条适配：如果你的进度条不是Bootstrap风格，调整width或者对应的进度控制属性即可，比如有些组件用value属性控制进度值。
• 参数验证：后端要校验webshop_id的合法性（比如是否为有效数字），过滤无效请求。

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