基于Ajax/JS/PHP的分类与子分类筛选功能问题求助

问题根源 #

你点击子分类时传了空字符串作为分类ID（val1），且字符串拼接data的方式容易引发参数异常；另外单选按钮的onload事件无效，导致页面初始加载时默认分类的子分类无法正常渲染。

具体修改步骤 #

1. 修复子分类的事件调用
   点击子分类时，不再传空分类ID，而是直接获取当前选中的分类单选按钮值，修改子分类HTML：

<div class="form-check">
    <input name="subFilter" onclick="showSubCats(null, this.value);" class="form-check-input" type="radio" value="<?php echo $sID; ?>" id="filter2">
    <label class="form-check-label" for="filter2">
        <?php echo $sName; ?>
    </label>
</div>

2. 优化Ajax函数逻辑
   给参数添加默认值处理，同时用对象形式传递数据（避免字符串拼接的编码问题），确保分类ID始终能正确获取：

function showSubCats(val1, val2) {
    // 优先用传入的val1，无传入值则取当前选中的分类ID
    const categoryId = val1 || $('input[name="filter"]:checked').val();
    $.ajax({
        type: "GET",
        url: "ajax/filter.php",
        // 用对象传递数据，jQuery自动处理编码和参数拼接
        data: {
            q: categoryId,
            p: val2
        },
        success: function(data){
            $("#catID").html(data);
        }
    });
};

3. 修复初始加载逻辑
   单选按钮的onload事件不生效，需在页面加载完成后手动调用函数，渲染默认分类的子分类：

// 页面加载完成后执行
$(function() {
    const defaultCategory = $('input[name="filter"]:checked').val();
    if (defaultCategory) {
        showSubCats(defaultCategory);
    }
});

4. 简化分类按钮的事件
   移除无效的onload属性，保留onchange即可：

<div class="form-check">
    <input name="filter" <?php if($findID == $cID) echo "checked"; ?> onchange="showSubCats(this.value);" class="form-check-input" type="radio" value="<?php echo $cID; ?>" id="filter1">
    <label class="form-check-label" for="filter1">
        <?php echo $cName; ?>
    </label>
</div>

额外提示 #

• 后端filter.php中需用isset($_GET['q'])和isset($_GET['p'])判断参数是否存在，避免报错。
• 用对象形式传递data比字符串拼接更安全，可避免特殊字符导致的参数截断或编码错误。

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