Question

我使用的是一个相当标准的JSON.stringify函数，它被传递给一个序列化这个对象的jQuery函数。

但是我想进行修改以允许发布一系列输入。就像当前解决方案如何处理一组复选框一样。

E.g。

<fieldset name="clothes">
  <input type="number" name="coat" />
  <input type="number" name="jacket" />
  <input type="number" name="jeans" />
  <input type="number" name="(guid)" />
</fieldset>

这些都是衣服，所以我想将它们形成如下：

{ "Clothes": { "coat" : 2 , "jacket" : 10 , "jeans" : 1 } }

在上面，该功能需要支持更高级别的分组。我对此的第一个想法是为fieldset添加一个名称。这对我来说似乎合乎逻辑。但是根据HTML规范，fieldset元素不是表单提交的一部分，因此可能会有一些人为此目的向此元素添加NAME，这违反了规范。但是，由于规范支持添加“名称”属性，我认为这是完全有效的。

在整个表单的上下文中，我正在寻找支持的内容：

<fieldset>
  <input type="text" name="Name" />
  <input type="text" name="Email" />
</fieldset>
<fieldset name="clothes">
  <input type="number" name="coat" />
  <input type="number" name="jacket" />
  <input type="number" name="jeans" />
  <input type="number" name="(guid)" />
</fieldset>

...给予

{ "Name" : "John" , Email : "x@y.com" , "Clothes": { "coat" : 2 , "jacket" : 10 , "jeans" : 1 } }

我在JSFiddle上发布了当前代码的简化版本 - http://jsfiddle.net/DR3EA/1/

Answer 1

我有这个http://jsfiddle.net/DR3EA/2/，但它无法将标签数据输入结果，因为我使用fieldset来进行序列化。

$.fn.serializeField = function() {
    var result = {};

    this.each(function() {

        $(this).find("fieldset").each( function() {
            var $this = $(this);
            var name = $this.attr("name");

            if (name) {
               result[name] = {};
               $.each($this.serializeArray(), function() {
                   result[name][this.name] = this.value;
               }); 
            }
            else {
               $.each($this.serializeArray(), function() {
                   result[this.name] = this.value;
               });
            }
         });

    });

    return result;
};

result将是

{"Name":"bb","Email":"cc","clothes":{"coat":"-1","jacket":"-2","jeans":"-2"}}

Answer 2

我遇到了类似的问题，最终使用了serializeObject jQuery插件。不要使用字段集，而是格式化name属性，如下所示：

<input type="text" name="work.street" value="320 3rd St">
<input type="text" name="work.city" value="San Fran">
<input type="text" name="work.state" value="CA">

鉴于上述输入，$('input').serializeObject()返回一个很好的嵌套JS对象：

{ work: { street: "320 3rd St", city: "San Fran", state: "CA" } }

Answer 3

jquery-serializeFields插件可能会有所帮助，但您需要指定一些属性（例如数据名称），以便像每个字段集（或容器元素）的键一样工作。

HTML：

<form>
<fieldset data-name="clothes">
  <input type="number" name="coat" value="1" />
  <input type="number" name="jacket" value="2"/>
  <input type="number" name="jeans" value="3"/>
  <input type="number" name="(guid)" value="4"/>
</fieldset>
</form>

<div id="result"></div>

的javascript：

var result = $("form").serializeFields();

$("#result").html(JSON.stringify(result));

结果：

{"clothes":{"coat":"1","jacket":"2","jeans":"3","(guid)":"4"}}

我在这里测试过：http://jsfiddle.net/zfj4Lprb/

jQuery将表单序列化为JSON - 生成输入数组

3 个答案: