如何在页面刷新时通过jQuery携带SUBCAT_ID发送请求

核心问题 #

页面刷新时，无法携带SUBCAT_ID到add.php，导致动态生成的筛选区域不显示，进而localStorage无法填充该区域的字段值。

解决思路 #

页面加载时从localStorage读取保存的SUBCAT_ID，通过AJAX发送给add.php重新生成筛选区域，待DOM渲染完成后，再从localStorage恢复该区域的字段值。

具体实现步骤 #

1. 修改页面加载时的AJAX请求，携带SUBCAT_ID #

替换原window.load中的AJAX逻辑，从localStorage获取子分类值后再发送请求：

$(window).on('load', function() {
    // 从localStorage读取保存的子分类值
    const savedSubCat = localStorage.getItem('subcategory');
    
    if (savedSubCat) {
        // 携带子分类参数请求add.php，生成筛选区域
        $.ajax({
            url: 'add.php',
            type: 'post',
            data: {
                subcat_name_js: savedSubCat
            }
        }).done(function(html) {
            // 插入新的筛选区域DOM
            const filterOptionsNew = $(html).find('#section-filters').find('.add-item__form-data');
            $('#section-filters').html(filterOptionsNew);
            
            // 初始化筛选区域的下拉转换逻辑
            initFilterDropdowns();
            
            // 从localStorage恢复筛选区域字段值
            restoreFilterFieldsFromLocalStorage();
            
            // 显示筛选区域
            $('#filters, #section-filters').show();
        });
    }
});

2. 封装筛选区域下拉转换逻辑 #

将重复的下拉框转输入框代码封装为函数，避免冗余：

function initFilterDropdowns() {
    const filtersSelect = $('#section-filters').find('select');
    filtersSelect.hide();
    
    filtersSelect.each(function() {
        const selectVal = $(this).find('.add-item__select-main').text(),
              name = $(this).attr('name');

        $('<input class="add-item__input-select" name="' + name + '" placeholder="' + selectVal + '" readonly required><i class="arrow down"></i></input>')
            .insertAfter($(this))
            .css({paddingLeft: '0.3em', cursor: 'pointer'});
    });
}

3. 封装筛选区域字段值恢复函数 #

专门处理筛选区域的localStorage值填充：

function restoreFilterFieldsFromLocalStorage() {
    // 恢复输入框值
    $('#section-filters').find('.add-item__input-select').each(function() {
        const fieldName = $(this).attr('name');
        const fieldValue = localStorage.getItem(fieldName);
        
        if (fieldValue) {
            $(this).val(fieldValue).addClass('black-text counted');
            // 添加对应标签
            $('<label class="add-item__form-label-JS">' + $(this).attr('placeholder') + '</label>')
                .insertBefore($(this))
                .css({color: '#888'});
        }
    });
    
    // 恢复复选框状态
    $('#section-filters').find(':checkbox').each(function() {
        const fieldName = $(this).attr('name');
        const fieldValue = localStorage.getItem(fieldName);
        
        if (fieldValue === $(this).val()) {
            $(this).prop('checked', true);
            $(this).parent().parent().addClass('counted');
        }
    });
}

4. 确认localStorage保存逻辑（可选优化） #

原有的unload事件已覆盖所有字段保存，可确保筛选区域字段正确存入localStorage：

$(window).on('unload', function() {
    $(':file, :checkbox, select, textarea, input').each(function() {
        if (!$(this).hasClass('add-item__select') && !$(this).is(':checkbox')) {
            localStorage.setItem($(this).attr('name'), $(this).val());
        } else if ($(this).is(':checked')) {
            localStorage.setItem($(this).attr('name'), $(this).val());
        }
    });
});

关键注意点 #

• 必须先完成筛选区域的DOM渲染，再执行localStorage值恢复，否则目标元素不存在无法填充
• 只有当localStorage中存在子分类值时才发送AJAX请求，避免无效请求
• 封装逻辑可提升代码复用性和维护性

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