Yii2如何移除URL中未使用的空查询参数 内置方案及JS实现咨询

Yii框架侧实现方案（优先推荐） #

Yii侧完全可以实现空参数移除，无需依赖JavaScript，两种常用实现方式如下：

• 方案1：控制器层过滤空参数后重定向
  在对应列表操作的控制器方法中，先对接收的GET参数做非空过滤，存在空参数时直接重定向到清理后的URL，代码示例：

public function actionConsignment()
{
    $params = \Yii::$app->request->queryParams;
    // 过滤空值，若0是业务有效参数可自行调整判断条件
    $filteredParams = array_filter($params, function ($value) {
        return $value !== '' && $value !== null;
    });
    // 原参数存在空值时跳转到清理后的URL
    if (count($params) !== count($filteredParams)) {
        return $this->redirect(array_merge(['consignment'], $filteredParams));
    }
    
    // 后续正常编写搜索、视图渲染逻辑
    $searchModel = new ConsignmentSearch();
    $dataProvider = $searchModel->search($filteredParams);
    
    return $this->render('consignment', [
        'searchModel' => $searchModel,
        'dataProvider' => $dataProvider,
    ]);
}

该方案无前端侵入，同时兼容用户直接访问带空参数URL的场景，自动完成参数清理。

• 方案2：修改GridView筛选表单提交逻辑
  Kartik GridView支持表单提交前的自定义处理，直接在组件配置中加入提交前清理逻辑即可：

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,
    // 新增提交前处理配置
    'beforeFilterSubmit' => new \yii\web\JsExpression("function(form) {
        // 空值输入设为禁用，浏览器提交表单时不会携带禁用字段的参数
        $(form).find(':input').filter(function() {
            return this.value.trim() === '';
        }).prop('disabled', true);
        return true;
    }"),
    // 其他原有配置
    'columns' => [
        // 你的列定义
    ],
]); ?>

前端JavaScript实现方案 #

如果不需要修改服务端代码，可直接使用以下完整JS代码实现空参数清理，兼容普通表单提交和Pjax场景：

// 监听GridView筛选表单提交事件
$(document).on('beforeSubmit', '.grid-view form', function(e) {
    const formData = new FormData(this);
    const searchParams = new URLSearchParams();
    
    // 仅保留非空参数
    for (const [key, value] of formData.entries()) {
        if (value.trim() !== '') {
            searchParams.append(key, value);
        }
    }
    
    window.location.href = `${this.action}?${searchParams.toString()}`;
    e.preventDefault();
    return false;
});

// 适配Pjax场景的参数清理
$(document).on('pjax:beforeSend', function(e, xhr, settings) {
    if (settings.type === 'GET' && settings.url.includes('?')) {
        const url = new URL(settings.url, window.location.origin);
        const params = url.searchParams;
        // 遍历删除空值参数
        for (const key of params.keys()) {
            if (params.get(key).trim() === '') {
                params.delete(key);
            }
        }
        settings.url = `${url.pathname}?${params.toString()}`;
    }
});

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