分页测验Next按钮重复添加Query Params问题求助

问题描述 #

我正在开发一个包含多道题目的分页测验，使用Next按钮切换题目并通过query parameters重载页面。当前代码每次点击按钮都会重复添加大量查询字符串，例如：?status=Active?status=Active?status=Active。

我希望每次点击仅添加一个查询字符串，且参数值随题目进度变化，比如第一题对应?status=1，第二题对应?status=2。

当前代码：

<script type="text/javascript">
    jQuery(document).ready(function($) { $(function () {
        $('[id*=next]').on('click', function () {
            var oldURL = window.location.href;
            var type = "Active";
            if (history.pushState) {
                var newUrl = oldURL + "?status=" + type;
                window.history.pushState({ path: newUrl }, '', newUrl);
            }
            return false;
        });
    });
    });
</script>

我尝试移除代码中的'', newUrl，但没有效果。

解决方案 #

问题根源是直接拼接旧URL的方式——每次点击都会在原有URL后追加新参数，导致重复。可以通过URL对象的searchParams API安全管理查询参数，同时跟踪题目进度：

修改后的代码 #

jQuery(document).ready(function($) {
    // 从当前URL读取题目进度，默认起始为1
    let currentStatus = parseInt(new URL(window.location.href).searchParams.get('status')) || 1;

    $('[id*=next]').on('click', function () {
        // 点击Next按钮，进度+1
        currentStatus += 1;
        
        if (history.pushState) {
            // 创建URL对象，方便操作查询参数
            const url = new URL(window.location.href);
            // 设置status参数，自动替换现有值，避免重复
            url.searchParams.set('status', currentStatus);
            
            const newUrl = url.toString();
            // 更新URL（不刷新页面）
            window.history.pushState({ path: newUrl }, '', newUrl);
            
            // 如果需要重载页面，取消注释下面这行
            // window.location.href = newUrl;
        }
        return false;
    });
});

关键说明 #

• 使用URL对象处理参数：searchParams.set()方法会自动替换已存在的status参数，不会重复添加，彻底解决拼接字符串的问题。
• 跟踪题目进度：初始化时从URL读取当前status值，刷新页面后进度不会丢失；每次点击Next自动累加进度值。
• 重载页面选项：如果需要通过修改参数后重载页面，取消注释window.location.href = newUrl;即可，此时pushState可以省略。

内容的提问来源于stack exchange，提问作者Deen Mohd Dar