如何将index.php中按筛选条件生成的SQL传递给无限加载调用的fetch_posts.php

实现方案 #

首先要明确：绝对不要直接把SQL语句从前端传递到后端，这会引发极其严重的SQL注入漏洞，攻击者可以任意篡改SQL语句执行删库、窃取数据等恶意操作。正确的做法是传递筛选参数，由后端根据参数拼接生成SQL语句。

第一步：修改index.php的逻辑和Ajax代码

1. 给搜索按钮绑定点击事件，点击时获取搜索栏、分类、位置三个筛选值，清空已加载的帖子，重置分页参数再重新拉取数据
2. 在Ajax请求中追加筛选参数，和分页参数一起传给fetch_posts.php

修改后的JS代码如下：

$(document).ready(function(){
    var limit = 10;
    var start = 0;
    var action = 'inactive';
    // 定义全局变量存储筛选参数
    var search_keyword = '';
    var category = '';
    var location = '';

    function load_data(limit, start){
        $.ajax({
            url:"fetch_posts.php",
            method:"POST",
            // 追加筛选参数到请求体
            data:{limit:limit, start:start, search_keyword:search_keyword, category:category, location:location},
            cache:false,
            success:function(data){
                // 搜索重置时替换内容，滚动加载时追加内容
                if(start == 0){
                    $('#posts_container').html(data);
                }else{
                    $('#posts_container').append(data);
                }
                if (data == ''){
                    $('#load_data_message').html('<p style="font-family:Helvetica;">没有更多内容了</p>');
                    action = 'active';
                } else {
                    $('#load_data_message').html('<img src="res/gif/loading.gif" class="loading-index" height="30px" width="30px"/><p class="load_message" style="font-family:Helvetica;">&nbsp;加载中...</p>');
                    action = 'inactive';
                }
            }
        });
    }

    // 搜索按钮点击事件，请替换下方DOM元素ID为你页面实际的对应ID
    $('#search_btn').click(function(){
        // 获取最新筛选值
        search_keyword = $('#search_input').val().trim();
        category = $('#category_select').val();
        location = $('#location_select').val();
        // 重置分页参数
        start = 0;
        action = 'active';
        // 重新加载第一页数据
        load_data(limit, start);
    });

    if (action == 'inactive'){
        action = 'active';
        load_data(limit, start);
    }

    $(window).scroll(function(){
        if($(window).scrollTop() + $(window).height() > $("#posts_container").height() && action == 'inactive'){
            action = 'active';
            start = start + limit;
            setTimeout(function(){
                load_data(limit, start);
            }, 1000);
        }
    });
});

第二步：修改fetch_posts.php的SQL生成逻辑

接收前端传的筛选参数，使用PDO预处理语句拼接SQL，避免注入风险，修改后的代码如下：

<?php
if(isset($_POST["limit"], $_POST["start"])){
    include 'includes/config.php';
    // 接收筛选参数
    $search_keyword = isset($_POST['search_keyword']) ? trim($_POST['search_keyword']) : '';
    $category = isset($_POST['category']) ? trim($_POST['category']) : '';
    $location = isset($_POST['location']) ? trim($_POST['location']) : '';

    // 基础SQL
    $sql = "SELECT * FROM users_posts WHERE 1=1 ";
    $params = [];

    // 拼接搜索条件，可按需调整匹配的字段
    if(!empty($search_keyword)){
        $sql .= " AND (item_description LIKE ? OR item_mine LIKE ? OR item_wanted LIKE ?) ";
        $params[] = "%{$search_keyword}%";
        $params[] = "%{$search_keyword}%";
        $params[] = "%{$search_keyword}%";
    }

    // 拼接分类条件
    if(!empty($category)){
        $sql .= " AND item_category = ? ";
        $params[] = $category;
    }

    // 拼接位置条件
    if(!empty($location)){
        $sql .= " AND item_location = ? ";
        $params[] = $location;
    }

    // 拼接排序和分页规则
    $sql .= " ORDER BY id DESC LIMIT ?, ? ";
    $params[] = (int)$_POST["start"];
    $params[] = (int)$_POST["limit"];

    // 使用预处理执行SQL，避免注入风险
    $stmt = $db->prepare($sql);
    $stmt->execute($params);

    while ($row = $stmt->fetch()) {
        $first_id = $row['id'];
        $item_mine = $row['item_mine'];
        $item_wanted = $row['item_wanted'];
        $item_desc = $row['item_description'];
        $item_category = $row['item_category'];
        $item_location = $row['item_location'];
        $item_pub = $row['publishing_date'];
        $item_exp = $row['expiring_date'];
        $image_1 = $row['image_1'];
        $image_2 = $row['image_2'];
        $image_3 = $row['image_3'];
        $image_4 = $row['image_4'];
        $first_image = "";
        $link = "post-".$first_id;
        if ($image_1 === ""){
            $first_image = "res/img/img_select.png";
        } else {
            $first_image = $image_1;
        }
        echo 'Html Content';
    }
}
?>

注意事项 #

• 必须使用预处理语句执行SQL，禁止直接拼接用户输入的内容到SQL语句中，否则会有SQL注入风险
• 可根据实际业务需求调整筛选条件匹配的字段，比如搜索关键词只需要匹配物品名称的话，修改对应WHERE条件即可

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