jquery - 每次 PJAX 表单更新时重复查询字符串参数 - 414 Request-URI Too Large

Question

在我看来，这是带有 PJAX 代码的 ActiveForm:

<?php Pjax::begin(['enablePushState' => false, 'id' => 'pjax-container']); ?>
...
<?php $form = ActiveForm::begin(['method' => 'POST',], ['options' => ['data-pjax' => true]]); ?>
<?= $form->field($model, 'form_input_1')->dropDownList($items, $params)->label(false); ?>
...
<?php ActiveForm::end(); ?>
...
<?php echo ListView::widget([...]); ?>
...
<?php Pjax::end(); ?>

我用js更新它:

$(document).on('change', 'filter dropdown_list', function(e) {
    $.pjax({
        push: false,
        timeout: 1000,
        url: $('#filter-form').attr('action'),
        container: '#pjax-conteiner',
        data: $('#filter-form').serializeArray(),
    });
});

因此，每个新查询，字符串参数都会重复。

第一次查询后查询字符串参数:

_csrf:VXswIzZsAyI2aQ==

表单名称[form_input_1]:1

表单名称[form_input_1]:2

表单名称[form_input_1]:3

_pjax:#pjax-container

第二次查询后的查询字符串参数:

_csrf:VXswIzZsAyI2aQ==

表单名称[form_input_1]:1

表单名称[form_input_1]:2

表单名称[form_input_1]:3

_pjax:#pjax-container

_csrf:VXswIzZsAyI2zZs==

表单名称[form_input_1]:2

表单名称[form_input_1]:3

表单名称[form_input_1]:4

_pjax:#pjax-container

例如，在 15 个查询之后，我遇到了这个错误:414 Request-URI Too Large

出了什么问题，我该如何解决？

Answer 1

我遇到了同样的问题，所以我做了 url clean 方法，它删除了所有重复的参数，留下最后一个，这是默认的 PHP 行为。此外，它还适用于数组参数，例如 Booking[status][]=1&Booking[status][]=4。

function removeDuplicateUrlParams(url) {
            var params = new URLSearchParams(url);
            var result = {},
                isArrayKey,
                arrayKey,
                prevArrayKey = '';

            for (var p of params.entries()) {
                isArrayKey = p[0].indexOf('[]', p[0].length - 2) !== -1;
                if (isArrayKey) {
                    arrayKey = p[0].substr(0, p[0].length - 2);
                    if (arrayKey === prevArrayKey) {
                        result[arrayKey].push(p[1]);
                    } else {
                        result[arrayKey] = [p[1]];
                    }
                    prevArrayKey = arrayKey;
                } else {
                    result[p[0]] = p[1];
                    prevArrayKey = '';
                }
            }

            return $.param(result);
        }

var search = removeDuplicateUrlParams(window.location.search);
var url = window.location.origin + window.location.pathname + '?' + search;

$.pjax.reload({
    container:'#pjax-container-id',
    url: url, 
    timeout: 10000
});