jQuery десериализует форму


Я использую jQuery Serialize для сериализации элементов моей формы и хотел бы десериализовать их обратно. К сожалению, не могу найти ни одного рабочего десериализатора jQuery, никаких предложений?

11 35

11 ответов:

Половина сериализации jQuery - это param () , поэтому половина того, что десериализует строку запроса, будет deparam. К сожалению, мне не удалось найти хорошего автономного депарама. На данный момент я рекомендую получить библиотеку jQuery BBQ и использовать ее. Если вам не нужны другие вещи, вы можете удалить их. Я где-то читал, что Бен Альман (ковбой) планировал извлечь deparam в свой собственный модуль.

Для остальной десериализации вам просто нужно будет выполнить цикл объект, который возвращает deparam и для каждой пары ключей и значений в объекте, выберите элемент формы на основе ключа и установите значение элементов формы в значение.

Я написал версию jQuery.deserialize , который поддерживает сериализованные данные, созданные из функций serialize, serializeArray и serializeObject. Он также поддерживает все типы элементов формы, включая флажки и переключатели.

Попробуйте это:

function deparam(query) {
    var pairs, i, keyValuePair, key, value, map = {};
    // remove leading question mark if its there
    if (query.slice(0, 1) === '?') {
        query = query.slice(1);
    }
    if (query !== '') {
        pairs = query.split('&');
        for (i = 0; i < pairs.length; i += 1) {
            keyValuePair = pairs[i].split('=');
            key = decodeURIComponent(keyValuePair[0]);
            value = (keyValuePair.length > 1) ? decodeURIComponent(keyValuePair[1]) : undefined;
            map[key] = value;
        }
    }
    return map;
}

Мне было очень интересно попробовать JQuery.десериализовать, но он, похоже, вообще не справлялся с чекбоксами, поэтому он не служил моим целям. Поэтому я написал свой собственный. Это оказалось проще, чем я думал, потому что функция jQuery val() выполняет большую часть работы:

jQuery.fn.deserialize = function (data) {
    var f = this,
        map = {},
        find = function (selector) { return f.is("form") ? f.find(selector) : f.filter(selector); };
    //Get map of values
    jQuery.each(data.split("&"), function () {
        var nv = this.split("="),
            n = decodeURIComponent(nv[0]),
            v = nv.length > 1 ? decodeURIComponent(nv[1]) : null;
        if (!(n in map)) {
            map[n] = [];
        }
        map[n].push(v);
    })
    //Set values for all form elements in the data
    jQuery.each(map, function (n, v) {
        find("[name='" + n + "']").val(v);
    })
    //Clear all form elements not in form data
    find("input:text,select,textarea").each(function () {
        if (!(jQuery(this).attr("name") in map)) {
            jQuery(this).val("");
        }
    })
    find("input:checkbox:checked,input:radio:checked").each(function () {
        if (!(jQuery(this).attr("name") in map)) {
            this.checked = false;
        }
    })
    return this;
};

Вы должны уметь использовать это так:

$("#myform").deserialize(data);

Где данные-это список параметров, например what $("#myform").serialize() будет производить.

Это влияет на все поля в форме, и это очистит значения полей, которые не содержатся в данных. Но вы также можете передать любой селектор, чтобы он влиял только на определенные поля, как это можно сделать с помощью функции serialize. Например:

$("select").deserialize(data);

Немного запоздал с этим, но кто-то может найти это полезным.

function fetchInput(identifier) {
    var form_data = identifier.serialize().split('&');
    var input     = {};

    $.each(form_data, function(key, value) {
        var data = value.split('=');
        input[data[0]] = decodeURIComponent(data[1]);
    });

    return input;
}

Я сейчас не отвечаю на ваш ответ, но я предполагаю, что вы хотите сериализовать его и отправить обратно на сервер, а затем использовать сериализованные данные, поэтому вы должны десериализовать его?

Если это так, вы должны рассмотреть возможность использования .serializeArray (). Вы можете отправить его как POST-данные в ajax, а затем получить доступ позже, потому что у вас будет объект.

Может быть немного поздно, но, возможно, вы ищете что-то вроде JQuery.десериализовать . Проблемы: нет поддержки флажков или переключателей.

Используя функцию Джека Аллана deparam с помощью jQuery, вы можете изменить эту строку:

map[key] = value;

К

$('input[name=' + key + ']').val(value);

Который загрузит данные обратно в поля формы.

Этот код возвращает массив, когда один и тот же ключ обнаруживается несколько раз в сериализованной строке


    chaine="single=Single1&multiple=Multiple&multiple=Multiple1&multiple=Multiple2&multiple=Multiple3&check=check2&radio=radio1"
    function deserialize(txt){
    myjson={}
    tabparams=chaine.split('&')
    var i=-1;
    while (tabparams[++i]){
    tabitems=tabparams[i].split('=')
    if( myjson[decodeURIComponent(tabitems[0])] !== undefined ){
        if( myjson[decodeURIComponent(tabitems[0])] instanceof Array ){
            myjson[decodeURIComponent(tabitems[0])].push(decodeURIComponent(tabitems[1]))
        }
    else{
       myjson[decodeURIComponent(tabitems[0])]= [myjson[decodeURIComponent(tabitems[0])],decodeURIComponent(tabitems[1])]
            }
        }
    else{
         myjson[decodeURIComponent(tabitems[0])]=decodeURIComponent(tabitems[1]);
        }
    }
    return myjson;
    }

Требуется все в одной строке, которую можно сохранить в файле COOKIE, а позже прочитать и заполнить ту же форму с входными значениями.

Разделитель входных элементов: ~ (Используйте любой разделитель)

Разделитель входных атрибутов: | (Используйте любой разделитель)

Тип ввода | имя ввода | входное значение ~ тип ввода 2| input2 имя | значение input2

var formData = '';
$('#form_id').find('input, textarea, select').each(function(i, field) {
    formData += field.type+'|'+field.name+'|'+field.value+'~';
});

Пример:

hidden|vote_id|10~radio|option_id|~radio|option_id|427~radio|option_id|428~

Если вы хотите удалить стандартную нотацию, закодированную в URL, вы можете использовать JavaScript decodeURIComponent () , который даст вам обычную строку, вот так:

var decodedString = decodeURIComponent("Http%3A%2F%2FHello%3AWorld");
alert(decodedString);

В этом случае decodedString будет выглядеть как Http://Hello:World, Вот рабочая скрипка.

Получил все это в поисках этой же проблемы и нашел ответ здесь: Как я могу декодировать URL с помощью jQuery?

Я знаю, что это старый вопрос, но делаю некоторые поиски jQuery десериализация привела меня сюда, так что я могу попытаться дать другой подход к проблеме для людей с той же проблемой.