使用jQuery將表單數據轉換為JS對象，包括分組值

Question

我想將表單數據序列化為JSON對象，如以下線程中所述： 使用jQuery將表單數據轉換為JavaScript對象但是，除了出現在表單中的單個字段外，我還有一些字段需要分組對象。 例如，我有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
},

謝謝。

Answer 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/

---

UPD

對於嵌套組，插件可以如下所示：

$.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/

Answer 2

您可以使用div或其他元素對輸入進行分組，並對json鍵使用諸如id或以數據為前綴的html5屬性之類的屬性。 在下面的示例中，我使用$.attr()來為組獲取ID，並為各個輸入獲取名稱。

http://jsfiddle.net/A9XvJ/