HTML格式轉換成JSON

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

讀值，並將其放置在合適的對象。另一種選擇是僅獲取指定的item元素（在某些循環）：

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

編輯 我看到使用serializeArray（）來實現這一點沒有漂亮的方式，但我會去的項目數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; 
     } 
    }); 
... 

注：此代碼是不完美的，但它會讓你在正確的方向！