10

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

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

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

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

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

4

3 回答 3

9

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

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

于 2012-08-24T09:42:15.877 回答
6

如果可能的话，您应该将附加值存储为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- 属性，而不是任何已存储在元素上的与数据相关的属性。

于 2012-08-23T22:24:34.380 回答
0

这是我的函数，获取元素的所有数据-* + 支持忽略数组

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;
}
于 2018-08-01T10:00:44.207 回答