使用localStorage保持表单提交后筛选栏状态，修复AJAX空白问题

一、修复AJAX提交后页面空白问题 #

你的AJAX代码存在几个核心问题导致数据无法展示：

1. 重复绑定#searchButton的点击事件，最终只会执行最后一个绑定的逻辑，第一个普通搜索的逻辑被覆盖
2. AJAX请求缺少回调函数，没有处理后端返回的JSON数据并渲染到表格
3. colModel是jqGrid（或同类表格插件）的列配置，不属于AJAX请求参数，应该放在表格初始化或重载的配置中
4. POST请求的参数错误拼接在URL上，不符合POST请求的参数传递规范

修正后的AJAX代码（合并搜索与筛选逻辑） #

// 只绑定一次click事件，合并普通搜索与高级筛选的参数
$("#searchButton").click(function(e) {
    // 阻止默认表单提交（避免页面重载）
    e.preventDefault();

    // 收集所有筛选参数（包含普通搜索和高级筛选）
    var params = {
        searchKeyword: $("#searchKeyword").val(),
        IDKeyword: $("#IDKeyword").val(),
        NMKeyword: $("#NMKeyword").val(),
        NM2Keyword: $("#NM2Keyword").val(),
        SCKeyword: $("#SCKeyword").val(),
        costStartKeyword: $("#costStartKeyword").val(),
        costEndKeyword: $("#costEndKeyword").val(),
        sellStartKeyword: $("#sellStartKeyword").val(),
        sellEndKeyword: $("#sellEndKeyword").val(),
        cnameKeyword: $("#cnameKeyword").val(),
        gnameKeyword: $("#gnameKeyword").val()
    };

    // 统一使用一个表单的action地址（根据实际情况调整）
    var url = $("#searchArea").attr("action");

    $.ajax({
        url: url,
        type: "POST",
        dataType: "json",
        data: params, // POST参数通过data传递，不用拼URL
        success: function(response) {
            // 假设你使用jqGrid渲染表格，这里重载表格数据
            $("#productTable").jqGrid('setGridParam', {
                datatype: 'local',
                data: response
            }).trigger('reloadGrid');

            // 如果是普通HTML表格，手动构建DOM渲染
            // renderTable(response);
        },
        error: function(xhr, status, error) {
            console.error("请求错误：", error);
            // 可添加错误提示
        }
    });
});

// 普通HTML表格渲染示例（如果不用jqGrid）
function renderTable(data) {
    var tableHtml = '<thead><tr><th>ProductID</th><th>Name</th><th>Alt.name</th><th>Special code</th><th>Sort Order</th><th>Talent Points</th><th>Selling price</th><th>Cost price</th><th>Category Name</th><th>Group name</th></tr></thead><tbody>';
    data.forEach(item => {
        tableHtml += `<tr>
            <td>${item.ITM_CD}</td>
            <td>${item.ITM_NM}</td>
            <td>${item.ITM_ALT_NM2}</td>
            <td>${item.SPL_CD}</td>
            <td>${item.SORDER}</td>
            <td>${item.TPOINTS}</td>
            <td>${item.SPRICE}</td>
            <td>${item.CPRICE}</td>
            <td>${item.CNAME}</td>
            <td>${item.GNAME}</td>
        </tr>`;
    });
    tableHtml += '</tbody>';
    $("#productTable").html(tableHtml);
}

二、修复筛选栏状态与输入值保留问题 #

原localStorage逻辑完全颠倒，且未处理输入值保存，以下是修正方案：

需求明确： #

• 首次加载页面：筛选栏默认隐藏，清空输入值
• 提交筛选后：筛选栏保持可见，保存当前输入值，页面刷新后仍保留状态与值

修正后的代码 #

$(document).ready(function() {
    // 页面初始化：默认隐藏筛选栏
    var $filterBar = $("#dropDownFilter");
    $filterBar.hide();

    // 从localStorage恢复状态与输入值
    var filterState = localStorage.getItem("filterVisible");
    var filterValues = JSON.parse(localStorage.getItem("filterValues")) || {};

    if (filterState === "visible") {
        $filterBar.show();
        // 回填输入值
        Object.keys(filterValues).forEach(key => {
            $(`#${key}`).val(filterValues[key]);
        });
    }

    // 筛选提交按钮点击事件
    $("#filterSearchButton").on("click", function(e) {
        e.preventDefault();

        // 保存筛选栏显示状态
        localStorage.setItem("filterVisible", "visible");

        // 收集并保存所有筛选输入值
        var values = {
            IDKeyword: $("#IDKeyword").val(),
            NMKeyword: $("#NMKeyword").val(),
            NM2Keyword: $("#NM2Keyword").val(),
            SCKeyword: $("#SCKeyword").val(),
            costStartKeyword: $("#costStartKeyword").val(),
            costEndKeyword: $("#costEndKeyword").val(),
            sellStartKeyword: $("#sellStartKeyword").val(),
            sellEndKeyword: $("#sellEndKeyword").val(),
            cnameKeyword: $("#cnameKeyword").val(),
            gnameKeyword: $("#gnameKeyword").val()
        };
        localStorage.setItem("filterValues", JSON.stringify(values));

        // 保持筛选栏可见
        $filterBar.show();

        // 触发搜索（调用之前的AJAX逻辑）
        $("#searchButton").trigger("click");
    });

    // 可选：添加重置按钮，清空状态与值
    $("#resetFilterButton").on("click", function() {
        localStorage.removeItem("filterVisible");
        localStorage.removeItem("filterValues");
        $filterBar.hide();
        $("#dropDownFilter input").val("");
    });
});

关键说明： #

• 使用filterVisible字符串标记筛选栏状态，而非保存CSS值，逻辑更清晰
• 用JSON对象保存所有输入值，避免多个localStorage键值对
• 页面初始化优先从localState恢复，否则默认隐藏
• 提交时主动保存状态与值，确保刷新后生效

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