价格范围滑块与城市筛选联动异常技术求助

看起来你遇到了一个典型的多条件筛选参数遗漏问题，我帮你理清楚怎么解决：

你当前的ajax方法只处理了尺寸和价格范围参数，完全没考虑城市筛选的参数传递和查询条件拼接。所以当你选中德里后，拖动价格滑块时，前端没把选中的城市值传给后端，后端还是按全量数据做价格筛选，自然会出现其他城市的数据。

1. 更新后端模型的ajax方法 #

首先要给ajax方法加上城市参数，并且在SQL查询里拼接城市的筛选条件：

public function ajax($size = '', $sprice = '', $eprice = '', $city = '') {
    $query = "SELECT * from info_user Where user_status ='1'";
    
    // 新增城市筛选条件（注意转义防止SQL注入）
    if(!empty($city)){
        $query .= " AND user_city = '" . mysqli_real_escape_string($this->db->link, $city) . "'";
    }
    
    // 补全你原有尺寸筛选逻辑
    if(!empty($size)){
        $query .= " AND user_size = '" . mysqli_real_escape_string($this->db->link, $size) . "'";
    }
    
    // 价格范围筛选逻辑
    if(!empty($sprice) && !empty($eprice)){
        $query .= " AND user_price BETWEEN '" . $sprice . "' AND '" . $eprice . "'";
    }
    
    // 执行查询并返回结果（按你原有逻辑补充）
    $result = $this->db->select($query);
    return $result;
}

2. 前端传递城市参数 #

要确保前端在拖动价格滑块发起ajax请求时，把当前选中的城市值一起传过去。假设你的城市下拉菜单ID是citySelect，滑块的JS逻辑可以这么写：

// 保存当前选中的城市值
let selectedCity = '';
document.getElementById('citySelect').addEventListener('change', function(){
    selectedCity = this.value;
});

// 价格滑块触发筛选的逻辑
function filterByPrice(startPrice, endPrice){
    // 发起ajax请求，带上所有筛选参数
    fetch('你的ajax接口地址', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `sprice=${startPrice}&eprice=${endPrice}&city=${selectedCity}&size=你当前选中的尺寸值`
    })
    .then(response => response.json())
    .then(data => {
        // 渲染筛选后的结果到页面
        renderFilteredResults(data);
    });
}

3. 验证逻辑 #

测试时可以打开浏览器开发者工具的网络面板，拖动价格滑块后查看请求参数，确认city字段已经正确携带了选中的城市值。后端接收到参数后，会自动在SQL查询中添加城市筛选条件，返回的就只会是该城市下符合价格范围的数据了。

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