如何將表單字段轉換為Json Object？

Question

例如，表單包含具有以下名稱的字段txt01，txt02，txt03 []，txt03 []，txt04 [名稱] []，txt04 [名稱] []，txt04 [電話] []，txt04 [電話] []， txt05 [] [名稱]，txt05 [] [電話]，txt05 [] [名稱]，txt05 [] [電話]。 當我在這些字段中輸入值並單擊提交按鈕時，它應生成以下Json對象：

Object {
    txt01: "Text 01",
    txt02: "Text 02",
    txt03: Array(2) {
        0: "Text 01",
        1: "Text 02"
    },
    txt04: Object 
    {
        name: Array()
        {
            0: Text 01
            1: Text 02
        },

        phone: Array()
        {
            0: 000001
            1: 000002
        }
    },
    txt05: Array(2) 
    {
        0: Object
        {
            name: Text 01
            phone: 000001
        },

        1: Object
        {
            name: Text 02
            phone: 000002
        }
    }

}

下面是要序列化為Json Object的形式。 將執行序列化的腳本應生成上面的Json對象。

<form>
    <input type="text" name="txt01" value="Text 01" />
    <input type="text" name="txt02" value="Text 02" />

    <input type="text" name="txt03[]" value="Text 01" />
    <input type="text" name="txt03[]" value="Text 02" />

    <input type="text" name="txt04[name][]" value="Text 01" />
    <input type="text" name="txt04[name][]" value="Text 02" />
    <input type="text" name="txt04[phone][]" value="000001" />
    <input type="text" name="txt04[phone][]" value="000002" />

    <input type="text" name="txt05[][name]" value="Text 01" />
    <input type="text" name="txt05[][phone]" value="000001" />
    <input type="text" name="txt05[][name]" value="Text 02" />
    <input type="text" name="txt05[][phone]" value="000002" />

    <input type="submit" value="Submit" />
</form>

Answer 1

我在這里進行了一些研究，但沒有找到適合我正在做的回應，因此我創建了一個解決方案。 有關更多詳細信息，您可以在這里訪問它https://github.com/citnvillareal/serializeObject

請不要猶豫，貢獻自己的力量。 希望對您有所幫助。

Answer 2

只想分享我的想法。 我只是使用本機javascript將應用程序表單開發為json。 您可以訪問此鏈接： https : //github.com/jhanxtreme/form-to-json

示例表格

<form name="f1" onsubmit="return formToJson(this);">
   <input type="text" name="username" value="dummyuser" / >
   <input type="password" name="password" value="password123" />
   <input type="submit" />
</form>

JSON輸出：

{
 username:"dummyuser",
 password:"password123"
}

同樣，這會將包括HTML5在內的大多數表單元素映射到JSON數據中。 希望這對您有所幫助。

Answer 3

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

這是從使用jQuery將表單數據轉換為JavaScript對象

您可能會嘗試環顧四周，聽起來似乎很多人都可以使用:)

Answer 4

仍然沒有明確要求，但我想你可以做這樣的事情

 var frm = $('form');
 var data = JSON.stringify(frm.serializeArray());

Answer 5

var myObj = new Object();
myObj.text01 = "Text 01";
myObj.text02 = "Text 02";
.
.
.
var string =JSON.stringify(myObj);