Блог

Изменение GET параметров страницы без перезагрузки

Изменение GET параметров страницы без перезагрузки

JQuery скрипт для работы с GET-параметрами на фреймворке Webasyst. Скрипт позволяет добавлять GET без перезагрузки страницы после отправки любой формы. Ниже можно посмотреть демо данного решения.

<script>
// Получение гетов
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

// Установка гетов
function setUrlVars(type, value) {
    if (!value) {
        return false;
    }
    var params = [];

    // получение массива данных
    if (typeof value == 'object') {
        $.each(value, function (key, val) {
            params.push(val.name + '=' + val.value);
        });
    } else
    if (getUrlVars()[type] && value != null) {
        params.push(type + '=' + value);
    } else {
        params.push(type + '=' + value);
    }

    for (var i = 0; i < getUrlVars().length; i++) {
        if (getUrlVars()[i] != type && getUrlVars()[getUrlVars()[i]] !== undefined) {
            params.push(getUrlVars()[i] + '=' + getUrlVars()[getUrlVars()[i]]);
        }
    }
    var url = '?' + params.join("&");
    if (!!(history.pushState && history.state !== undefined)) {
        window.history.pushState({}, '', url);
    }
}

// Пример использования при клике на кнопку
$('body').on('submit', 'form', function () {
    var form_data = $(this).serializeArray();
    setUrlVars(null, form_data);
    return false;
});
</script>

<form>
    <input type="text" name="text" value="text in url" />
    <input type="submit" name="button" value="Test submit">
</form>

Демо работы скрипта

Павел

Павел

14 июня 2019

Просмотры: 946