jQuery сериализует атрибуты данных HTML5

Вот как это можно сделать. Возможно, это не лучший способ, но он работает так, как должен работать.

http://jsfiddle.net/Bvzqe/12/

HTML:

<form id="frm" data-id="123" data-list[one]="first" data-list[two]="second">

Сериализация:

    var form = $('#frm');
    var dataarr = new Array();
    for(var i in form.data()) {
        var subarr = new Array();
        subarr['name'] = i;
        subarr['value'] = form.data()[i];
        dataarr.push(subarr);
    }
    var serialized = $.param(form.serializeArray().concat(dataarr));

Он даже позволяет вам иметь массивы data- атрибутов, таких как

data-list[one]="first" data-list[two]="second"

Закодированный URL-адрес может показаться неправильным, так как он пропускает квадратные скобки, но я проверил это на стороне сервера - он анализирует все точно так, как должен.

Это только для тех, кто не хочет использовать <input type="hidden">

Если это вообще возможно, вы должны хранить свои дополнительные значения как hidden полей ввода (по одному на значение), а не как метаданные в других полях ввода. Затем они будут автоматически сериализованы как часть формы.

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

$('#myform:input').each(function() {
    var input = this;
    $.each($(input).data(), function(key, value) {
        $('<input>', {type: hidden, name: key, value: value}).insertAfter(input);
    });
});

Эй, вуаля, скрытые поля ввода, которые будут автоматически сериализованы!

Имейте в виду, что jQuery также использует .data() для хранения таких вещей, как события. Чтобы избежать повторения этих объектов, вам придется использовать собственные функции DOM для извлечения data- атрибутов, а не каких-либо связанных с данными свойств, которые были сохранены в элементах. .

вот моя функция, получить все данные-* элемента + поддержка массива игнорирования

Data2Params: function (el, ignoredAtt) {
    ignoredAtt = typeof ignoredAtt !== 'undefined' ? ignoredAtt : [];

    var data = {};
    for (var key in el.data()) {
        if (ignoredAtt.indexOf(key) === -1)
            data[key] = el.data(key);
    }
    return data;
}