jQuery AJAX POST提交参数后PHP端$_POST/$_REQUEST为空问题求助

问题根因 #

1. 事件绑定逻辑错误：将select的change事件监听嵌套在表单submit事件回调中，导致只有触发表单提交后，下拉框变化才会触发Ajax请求，且每次提交都会重复绑定事件，造成多次重复请求。
2. 选中值获取与判断逻辑错误：
   • $("select[name='Category'] option").filter(':selected').val()会匹配页面所有name=Category的下拉框，永远返回第一个匹配项的选中值，无法获取当前操作的下拉框值
   • 非空判断$.trim($("SelectValue")) != ''错误将变量名用引号包裹，变成了查找不存在的<SelectValue>标签的jQuery选择器，判断永远不生效
3. HTML规范错误：多个子分类下拉框使用了重复的id="SubCategory"，违反DOM ID唯一性规则，后续操作子分类下拉框时会出现选择异常。
4. 可选后端校验项：如果修正前端后仍然无法拿到POST参数，检查GetSubCat.php是否存在前置重定向、跨域校验逻辑，或者是否错误将请求识别为JSON格式未做解析处理。

修正后的jQuery代码 #

$(function () {
    // 直接绑定select的change事件，不要嵌套在submit回调中
    $("select[name='Category']").change(function () {
        const SelectName = $(this);
        // 直接取当前触发change的下拉框的选中值
        const SelectValue = SelectName.val();
        const NextSelectRef = SelectName.next();
        console.log(SelectName);

        // 变量直接传入trim，不要加引号
        if ($.trim(SelectValue) != '') {
            console.log('Prepare to ajax!');
            $.ajax({
                url: '/GetSubCat.php',
                method: 'POST',
                data: {Category: SelectValue},
                success: function(data){
                    console.log(data);
                    // 后续可以在这里给当前下拉框对应的子分类下拉框赋值
                    // NextSelectRef.html(返回的选项内容)
                },
                error:function(error){
                    console.log(error);
                }
            });
        }
    });

    // 表单提交逻辑单独处理，如果不需要默认提交可以保留阻止默认行为
    $('#test-form').on('submit', function (e) {
        e.preventDefault();
        // 其他表单提交逻辑写在这里
    });
});

HTML修正建议 #

将所有重复的id="SubCategory"修改为不同的ID，或者移除重复ID，通过兄弟节点关系操作对应子分类下拉框即可。

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