转换为JSON时多个对象的HTML表单 [英] HTML form for multiple objects when converting to JSON

问题描述

$.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;
};`

经过编辑，希望更加清晰.

Edited to hopefully make clearer.

难以解决这个问题-睡眠剥夺=疯狂.

Having difficulty wrapping my head around this - sleep deprivation = madness.

我有一种表单，可以将数据简单地序列化为JSON并存储以备后用.

I have a form that simply serialises the data into JSON and stores it for later use.

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

序列化表格时，我得到的结果是:

when the form is serialised the result I get is:

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

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

what I need is the typical tree structure of JSON something where each item has its own level, something like:

{
"a": "1",

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

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

Ideally I'd like to have an option whereby the user can state how many items the form should request information for but I need a basic working example first.

一旦有了这些数据，我便将其转换为JSON，并在可能的情况下希望使用类似树的结构.任何帮助表示赞赏.这篇文章如何将表单序列化为对象(具有树形结构)?有很多帮助，但它对我遇到问题的HTML的结构很有帮助.再次感谢.

once I have this data I'm then converting it into JSON and would like a tree like structure if possible. Any help appreciated. This post How to serialize a form into an object (with tree structure)? helps a lot but its the structure of the HTML I'm having issues with. Thanks again.

推荐答案

我将引入新的html属性:

I'd introduce new html attribute:

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

读取值并将其放置在正确的对象中.另一种选择是仅在指定的项目中获取元素(在某些循环中):

to read value and place it in right object. Other option is to get elements only for specified item (in some loop):

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

编辑我看不到使用serializeArray()实现此目的的漂亮方法，但是我会在name属性(name ="type1")中查找项目编号，或者再次将i作为项目编号进行循环:

EDIT I see no pretty way of using serializeArray() to achieve this, but I'd go for item number in name attribute (name="type1") or again for loop with i as item number:

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

这篇关于转换为JSON时多个对象的HTML表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！