jQuery序列化HTML5数据属性

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- 属性,而不是任何已存储在元素上的数据相关属性.