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

Posted 2023-05-09

【中文标题】转换为 JSON 时多个对象的 HTML 表单

【英文标题】：HTML form for multiple objects when converting to JSON

【发布时间】：2014-01-23 04:25:51

【问题描述】：

已编辑：

$.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 的结构。再次感谢。

【问题讨论】：

我很难理解您的问题？考虑改写。您是否尝试动态模板化 Selects 和 fb 输入？

@Nix - 很抱歉造成混乱。我需要几个项目的详细信息。每个项目都是相同的对象类型并具有相同的字段但将具有不同的值。这有帮助吗？

不是真的......也许其他人可以解释你需要什么。也许从你想不通的开始？

@Nix - 我已经用我所拥有的和输出更新了这个问题。再次抱歉。

@Nix - 刚刚更新，如果还不清楚，请道歉

【参考方案1】：

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

<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;
        
    );
...

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

【讨论】：

您好，感谢您抽出宝贵时间提出解决方案。我不介意快速，但我确实喜欢漂亮:) 这可以修改为动态吗？最终的游戏是询问用户要添加多少项目，然后生成需要填充的字段

是的，只需将我的解决方案与@zola 结合起来，并在第一个“if”语句中使用$(this).attr('data-item') 代替this.name。

【参考方案2】：

我要引入新的 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="type1") 中使用项目编号，或者再次使用 i 作为项目编号的循环：

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