使用 jQuery 将表单数据转换为 JS 对象，包括分组值答案

【问题标题】：Convert form data to a JS object with jQuery, including grouped values使用 jQuery 将表单数据转换为 JS 对象，包括分组值
【发布时间】：2014-05-04 19:43:26
【问题描述】：

我想将我的表单数据序列化为 JSON 对象，如以下线程中所述：Convert form data to JavaScript object with jQuery 然而，除了出现在表单中的单个字段之外，我还有一些字段，我想将这些字段分组为单独的对象。例如，我有 2 个字段 - startDate 和 endDate。而在 JSON 对象中我想实现以下结构：

"dates" : {
     "startDate" : "03/19/2014",
     "endDate" : "03/27/2014"
},

所以，我想获取firstDate 和endDate 的值，将它们组合到一个对象dates 中，然后添加到包含不同字段值的对象中。

谁能给我一个关于如何实现这一点的提示？有没有办法定义某种 JSON“模板”并将属性值替换为表单中的值？

还有一个我需要支持的更深入的例子：

"demographic" : {
  "declaredGender" : "any",
      "estimatedGender" : "female",
      "estimatedGenderConfidence" : 50,
      "declaredYearOfBirth" : {
          "from" : "1960",
          "to" : "1990"
      },
      "estimatedYearOfBirth" : {
          "from" : "1980",
          "to" : "1990"
      },
      "estimatedYearOfBirthConfidence" : 50
},

谢谢。

【问题讨论】：

标签： javascript jquery json forms

【解决方案1】：

这样的事情怎么样：

$.fn.serializeObject = function(options) {

    var data = $(this).serializeArray(),
        obj = {};

    $.each(data, function(i, el) {
        var key = el.name;
        if (el.name in options) {
            obj[options[key]] = obj[options[key]] || {};
            obj[options[key]][key] = el.value;
        }
        else {
            obj[key] = el.value;
        }
    });

    return obj;
};

你可以这样使用它：

var data = $('form').serializeObject({startDate: 'dates', endDate: 'dates'});

所以你在配置中说你希望startDate 字段进入dates 组等等。您还可以定义多个组，例如：

$('form').serializeObject({
    startDate: 'dates',
    endDate: 'dates',
    firstName: 'user',
    lastName: 'user'
});

演示：http://jsfiddle.net/dfsq/UwFTr/1/

更新

对于嵌套组插件可以如下所示：

$.fn.serializeObject = function(options) {

    function namespace(obj, keys, name, value) {
        keys = keys.split('.');
        var o = obj;
        for (var i = 0; i < keys.length; i++) {
            o[keys[i]] = o[keys[i]] || {};
            o = o[keys[i]];
        }
        o[name] = value;
        return obj;
    }

    var elements = $.makeArray($.prop(this[0], "elements")),
        obj = {};

    $.each(elements, function(i, el) {
        if (!el.name || $(el).is(":disabled")) return;

        var group = $(el).attr('group');

        if (!group) {
            obj[el.name] = $(el).val();
        }
        else {
            obj = namespace(obj, group, el.name, $(el).val());
        }
    });

    return obj;
};

在 HTML 中使用它：

<input type="date" name="startDate" group="event.dates" value="2014-03-26">

演示：http://jsfiddle.net/dfsq/UwFTr/2/

【讨论】：

谢谢，这对 2 个级别非常有效，但有些情况下结构更深。我用这样的例子更新了我的问题。此功能不适用于此。
这种情况有什么解决方案吗？

【解决方案2】：

您可以使用 div 或其他元素对输入进行分组，并为 json 键使用诸如 id 之类的属性或以数据为前缀的 html5 属性。在下面的示例中，我使用 $.attr() 为组提取 ID，并为各个输入命名。

http://jsfiddle.net/A9XvJ/

【讨论】：