Question

编辑：

$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
    var value = this.value || '';
    if (/^\d+$/.test(value))
        value = +value;

    if (o[this.name] !== undefined) {
        if (!o[this.name].push) {
            o[this.name] = [o[this.name]];
        }
        o[this.name].push(value);
    } else {
        o[this.name] = value;
    }
});
return o;
};`

编辑希望更清楚。

难以绕过这个 - 睡眠剥夺=疯狂。

我有一个表单，可以简单地将数据序列化为JSON并存储以供以后使用。

<form id="form" method="post">

a? <input class="number" type="text" name="a" size="5" maxlength="5"/><br/>

第1项：

Type?:<br/>
<select size="2" name="type">
    <option value="1">b</option>
    <option value="2">c</option>
</select>

d:<input class="number" type="text" name="d" maxlength="2" size="2"/> <br/>
e:<input class="number" type="text" name="e" maxlength="2" size="2"/> <br/>

<p>Item 2:</p>


Type?:<br/>
<select size="2" name="type">
    <option value="1">b</option>
    <option value="2">c</option>
</select>

d:<input class="number" type="text" name="d" maxlength="2" size="2"/> <br/>
e:<input class="number" type="text" name="e" maxlength="2" size="2"/> <br/>

<input type="submit" />

当表单序列化时，我得到的结果是：

JSON{
    "a":1,
    "type":[1,2],
    "d":[99,33],
    "e":[99,33]
}

我需要的是JSON的典型树结构，其中每个项目都有自己的级别，如：

{
"a": "1",

"item1": 
{
    "type": "1",
    "d": "99",
    "e": "99",
},
"item2": 
{
 "type": "2",
 "d": "33",
 "e": "33",
 }

理想情况下，我希望有一个选项，用户可以说明表单应该请求信息的项目数，但我首先需要一个基本的工作示例。

一旦我获得了这些数据，我就将其转换为JSON，如果可能的话，我希望树状结构。任何帮助赞赏。这篇文章How to serialize a form into an object (with tree structure)?有很多帮助，但它的HTML结构我遇到了问题。再次感谢。

Answer 1

我将介绍新的html属性：

<input data-item="1" class="number" type="text" name="d" maxlength="2" size="2"/>
<select data-item="1" size="2" name="type"> ...

然后我会用

$(this).attr('data-item');

读取值并将其放在正确的对象中。其他选项是仅为指定项目获取元素（在某些循环中）：

$('input[data-item="1"], select[data-item="1"]').each(...);

修改我没有看到使用serializeArray（）来实现这一点的好方法，但我会在name属性（name =“type1”）中找到项目编号，或者再次使用i作为项目编号循环：

$('[data-item="'+i+'"]', this).serializeArray();

Answer 2

快速而肮脏的方式是：根据项目编号更改输入的名称：

<input name="item1.a" ... />
<input name="item2.a" ... />
<input name="item3.a" ... />

然后修改serializeObject()以寻找点：

...
    $.each(a, function() {
        var value = this.value || '';
        if (/^\d+$/.test(value))
            value = +value;

        if ( this.name && this.name.indexOf('.') )
        {
            var split = this.name.split('.');
            o[ split[0] ] = o[ split[0] ] || {};
            o[ split[0] ][ split[1] ] = value
        }
        else if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(value);
        } else {
            o[this.name] = value;
        }
    });
...

注意：此代码并不完美，但它会让您朝着正确的方向前进！

转换为JSON时多个对象的HTML表单

2 个答案: