Question

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

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

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

我尝试将它们放入<form>标记，<input>标记中 - 无效。

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

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

这是我的功能，获取元素的所有数据*，并支持忽略数组

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

jQuery序列化HTML5数据属性

3 个答案: