在jQuery .load数据刷新中保留历史选中值的技术问题

核心问题解决思路 #

你需要在页面中存储当前选中的周数，这样点击排序按钮时就能把这个值一起传给后端。下面提供两种简单易行的实现方式：

方式1：使用JavaScript变量存储当前周数

这种方式不需要额外的HTML元素，直接用JS变量保存选中的周数：

1. 初始化变量：在页面加载时，把PHP渲染的当前周数赋值给JS变量：

// 放在jQuery代码之前，确保页面初始化时就能获取到值
let currentWeek = "<?php echo htmlspecialchars($this_week); ?>";

2. 更新周数变量：修改周按钮的点击事件，同步更新这个变量：

$('body').on('click', "button[name='sky_week']", function () { 
    currentWeek = $(this).attr("id"); 
    $("#adv_stats").load("index.php #adv_stats", {this_week: currentWeek}); 
});

3. 排序时带上周数：修改排序按钮的点击事件，把currentWeek作为参数传入后端：

$('body').on('click', "button[name='ASC'], button[name='DESC']", function () { 
    const sortDirection = $(this).attr("name"); 
    const sortField = $(this).attr("id");
    $("#adv_stats").load("index.php #adv_stats", {
        this_week: currentWeek,
        up_down_type: sortDirection,
        sort_type: sortField
    }); 
});

方式2：使用隐藏表单字段存储当前周数

这种方式更直观，适合需要和表单交互的场景：

1. 添加隐藏字段：在页面的<body>中添加一个隐藏input，初始值为当前周数：

<input type="hidden" id="current_week" value="<?php echo htmlspecialchars($this_week); ?>">

2. 更新隐藏字段：点击周按钮时，同步更新隐藏字段的值：

$('body').on('click', "button[name='sky_week']", function () { 
    const selectedWeek = $(this).attr("id"); 
    $("#current_week").val(selectedWeek);
    $("#adv_stats").load("index.php #adv_stats", {this_week: selectedWeek}); 
});

3. 排序时读取隐藏字段：点击排序按钮时，获取隐藏字段的值并传入后端：

$('body').on('click', "button[name='ASC'], button[name='DESC']", function () { 
    const sortDirection = $(this).attr("name"); 
    const sortField = $(this).attr("id");
    const selectedWeek = $("#current_week").val();
    $("#adv_stats").load("index.php #adv_stats", {
        this_week: selectedWeek,
        up_down_type: sortDirection,
        sort_type: sortField
    }); 
});

关于编码实践的疑问 #

把.load()指向当前页面（index.php）并仅更新指定div的方式完全没问题，不属于不良编码实践。这种局部刷新的方式在前端开发中很常见，尤其适合快速实现页面部分更新的需求。

当然，如果你想优化性能，可以考虑专门写一个只返回数据表HTML的PHP接口（比如ajax/get_adv_stats.php），这样不需要加载整个页面的冗余内容（比如导航、头部等），但对于新手阶段来说，当前的实现是完全可行的，不用过度担心。

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