jQuery序列化HTML5数据属性

Question

无法在任何地方找到这个，也许有人知道或可以提出建议。

我有一个包含大量<inputs>的表单，我想用jQuery $.ajax函数发送该表单，所以我做了$('#myform').serialize()并将其作为json发送。

现在我的表单更高级并且具有HTML5 data-属性，我也想发送它，但.serialize()看不到它们。

我尝试将它们放在<form>标签， <input>标签中 - 没有任何效果。

抓住它们并发送所有表单数据的最佳做法是什么？ 我知道.serializeArray() ，但是如何获得我的<form>标签附加序列化的所有data-属性？

Answer 1

这是如何做到的。 它可能不是最好的方式，但它的工作方式应该是最好的。

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">

Answer 2

如果可能的话，您应该将附加值存储为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);
    });
});

嘿presto，隐藏的输入字段，将自动序列化！

请注意，jQuery还使用.data()来存储事件之类的内容。 为了避免迭代这些对象，您必须使用本机DOM函数来检索data- 属性 ，而不是任何已存储在元素上的数据相关属性 。

Answer 3

这是我的func，得到所有data- * of element + support ignore array

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;
}