如何编写JS函数发送GET请求并更新URL（Django分页场景）

因为需要触发页面刷新并更新URL以匹配筛选参数（适配Django分页器的状态保持需求），不能再用无刷新的AJAX请求，而是要构建带参数的URL并跳转，具体实现如下：

方案1：使用原生URL API（推荐，兼容性好） #

该方法可灵活处理现有URL参数，支持保留或替换已有参数：

function filterOrders(options) {
    // 基于当前页面URL创建URL对象
    const currentUrl = new URL(window.location.href);
    
    // 遍历筛选参数，替换或添加到URL查询参数中
    Object.keys(options).forEach(key => {
        currentUrl.searchParams.set(key, options[key]);
    });
    
    // 跳转到新URL，触发页面刷新
    window.location.href = currentUrl.toString();
}

方案2：使用jQuery的param方法（简化写法） #

如果项目已引入jQuery，可借助$.param快速将对象转为查询字符串：

function filterOrders(options) {
    // 将options对象转为URL查询字符串
    const queryParams = $.param(options);
    // 拼接当前页面路径和查询参数
    const targetUrl = `${window.location.pathname}?${queryParams}`;
    // 跳转刷新页面
    window.location.href = targetUrl;
}

使用说明 #

调用方式和你原来的AJAX函数完全一致，例如：

filterOrders({
    date_start: '01.01.2022',
    date_end: '26.08.2022',
    type: '1'
});

执行后页面会刷新，URL会变成类似www.localhost/page1/?date_start=01.01.2022&date_end=26.08.2022&type=1的形式，Django视图可以通过request.GET.get('date_start')等方式获取参数，再结合分页逻辑返回对应页面。

额外说明 #

• 如果需要清空现有所有查询参数再添加新参数，可在方案1中先执行currentUrl.search = ''，再用append方法添加参数
• 这种方式符合分页器的状态需求，用户刷新页面或分享链接时，筛选条件和分页状态会被保留

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