HTML+PHP可筛选作品图片页初始加载无图片问题求助

问题根源 #

首次加载页面时无POST请求，$_POST中的变量未定义，直接赋值会导致SQL查询条件变为LIKE ''，无法匹配任何数据；如果硬设变量为%则会覆盖用户筛选值，导致筛选失效。

修复后的完整代码 #

HTML表单部分

<form action="/" method="post">
    Filter by Weave:
    <select name="weave">
        <option value="%">Select...</option>
        <option value="Byzantine">Byzantine</option>
        <option value="Box">Box</option>
    </select>

    Filter by Pattern:
    <select name="pattern">
        <option value="%">Select...</option>
        <option value="1 Cap">1 Cap</option>
        <option value="2 Cap Split Alt">2 Cap Split Alt</option>
        <option value="Alt">Alt</option>
        <option value="Spiral">Spiral</option>
    </select>

    Filter by color:
    <select name="color1">
        <option value="%">Select...</option>
        <option value="Silver">Silver</option>
        <option value="Black">Black</option>
        <option value="Black Ice">Black Ice</option>
        <option value="Frosted">Frosted</option>
        <option value="Gold">Gold</option>
        <option value="Champagne">Champagne</option>
        <option value="Bronze">Bronze</option>
        <option value="Pink">Pink</option>
        <option value="Dark Rose">Dark Rose</option>
        <option value="Red">Red</option>
        <option value="Orange">Orange</option>
        <option value="Yellow">Yellow</option>
        <option value="Lime">Lime</option>
        <option value="Green">Green</option>
        <option value="Dark Teal">Dark Teal</option>
        <option value="Turquoise">Turquoise</option>
        <option value="Seafoam">Seafoam</option>
        <option value="Sky Blue">Sky Blue</option>
        <option value="Medium Blue">Medium Blue</option>
        <option value="Royal Blue">Royal Blue</option>
        <option value="Iris Purple">Iris Purple</option>
        <option value="Poison">Poison</option>
        <option value="Electric Violet">Electric Violet</option>
        <option value="Midnight">Midnight</option>
    </select>

    Filter by Type:
    <select name="type">
        <option value="%">Select...</option>
        <option value="Bracelet">Bracelet</option>
        <option value="Necklace">Necklace</option>
    </select>

    <br><br>
    <button type="submit">Apply Filters</button>
</form>

PHP处理部分

<?php
include '/chain.holding/chain.conn.php';

// 给变量设置默认值：首次加载用%，提交表单时用POST传的值
$weave = $_POST["weave"] ?? "%";
$pattern = $_POST["pattern"] ?? "%";
$color1 = $_POST["color1"] ?? "%";
$type = $_POST["type"] ?? "%";

// 使用预处理语句避免SQL注入，同时确保查询逻辑正确
$query = "SELECT * FROM Chain.1614 
          WHERE weave LIKE ? 
            AND pattern LIKE ? 
            AND (color1 LIKE ? OR color2 LIKE ? OR color3 LIKE ? OR color4 LIKE ?) 
            AND type LIKE ?";

$stmt = mysqli_prepare($conn, $query);
// 绑定参数：6个字符串类型的参数
mysqli_stmt_bind_param($stmt, 'ssssss', $weave, $pattern, $color1, $color1, $color1, $color1, $type);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

while($row = mysqli_fetch_assoc($result))
{
    echo "<figure class='item'>";
        echo "<figcaption class='caption'><H1>$row[name]</H1></figcaption>";
        echo "<a href='$row[image]'><img src='$row[image]'/></a>";
        echo "<figcaption class='caption'>Weave: $row[weave] &emsp; Pattern: $row[pattern]</figcaption>";
        echo "<figcaption class='caption'>Colors: $row[color1], $row[color2], $row[color3], $row[color4]</figcaption>";
        echo "<figcaption class='caption'><br></figcaption>";
        echo "<figcaption class='caption'>$row[description]</figcaption>";
    echo "</figure>";
}

// 关闭语句和连接
mysqli_stmt_close($stmt);
mysqli_close($conn);
?>

关键修复点 #

1. 变量默认值处理：使用??空合并运算符（PHP7及以上支持），当$_POST变量不存在时自动赋值为%，既解决首次加载无数据的问题，又保留用户筛选值。
2. SQL注入防护：替换直接拼接SQL的写法，改用mysqli预处理语句，避免恶意输入导致的安全问题。
3. 连接关闭修正：原代码中mysqli_close($con)的变量名错误，改为$conn匹配连接变量。
4. 表单完善：添加提交按钮，确保用户可以触发筛选操作。

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