將HTML表單轉換爲JSON對象

-1

我想將HTML表單轉換爲JSON對象。表單基本上包含兩個部分，標題和細節。標題部分包含一些HTML輸入框，而詳細信息部分是表格。我的表單的虛擬視圖如下。將HTML表單轉換爲JSON對象

<!DOCTYPE html> 
 
<html lang="en"> 
 
<body> 
 
\t <form id="MyForm" method="POST"> 
 
\t <div name="HeaderData"> 
 
\t \t <label id="lblFname">First Name:</label> 
 
\t \t <input type="text" name="fname"/> <br/> 
 
\t \t <label id="lblLname">Last Name:</label> 
 
\t \t <input type="text" name="lname" /> <br/> 
 
\t \t <label id="lblEmail">Email:</label> 
 
\t \t <input type="text" name="email" /> <br/> 
 
\t </div> 
 
\t <div id="DetailData"> 
 
\t \t <table cellspacing="0" align="Center" rules="all" border="1" id="MyTable" style="width:940px;border-collapse:collapse;"> 
 
\t \t \t </thead> \t \t 
 
\t \t \t \t \t <th scope="col">Code</th> 
 
\t \t \t \t \t <th scope="col">Name</th> 
 
\t \t \t \t \t <th scope="col">Continent</th> 
 
\t \t \t \t \t <th scope="col">Region</th> 
 
\t \t \t \t \t <th scope="col">Population</th> 
 
\t \t \t \t \t <th scope="col">Independence Year</th> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td name="Code">Ind</td> 
 
\t \t \t \t \t <td name="Country">India</td> 
 
\t \t \t \t \t <td name="Continent">Asia</td> 
 
\t \t \t \t \t <td name="Region">Asia</td> 
 
\t \t \t \t \t <td name="Population">113Core</td> 
 
\t \t \t \t \t <td name="Independence">1947</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td name="Code">Ind</td> 
 
\t \t \t \t \t <td name="Country">India</td> 
 
\t \t \t \t \t <td name="Continent">Asia</td> 
 
\t \t \t \t \t <td name="Region">Asia</td> 
 
\t \t \t \t \t <td name="Population">1500000</td> 
 
\t \t \t \t \t <td name="Independence">1947</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table> 
 
\t </div> 
 
</body> 
 
</form> 
 
</html>

我希望得到的JSON對象來模擬：

{"HeaderData":[{"Fname":"XYZ","LName":"ABC","Email":"[email protected]"}], 
 
"DetailData":[{"Code":"Ind","Name":"India","Continent":"Asia","Region":"Asia","Population":"113 Crore","Independence Year":"1947"}], 
 
"DetailData":[{"Code":"Ind","Name":"India","Continent":"Asia","Region":"Asia","Population":"113 Crore","Independence Year":"1947"}] 
 
}

我已經嘗試了不同的庫，例如jquery.tabletojson.js但他們無法將數組分配給單獨的變量。

後來我想將此JSON對象轉換爲XML字符串，以便我可以在SQL Server QUERY中處理它。我期望XML字符串模仿：

enter code here 
 
<Root> 
 
\t <HeaderData> 
 
\t \t <FName>XYZ</FName> 
 
\t \t <LName>XYZ</LName> 
 
\t \t <Email>[email protected]</Email> 
 
\t </HeaderData> 
 
\t <DetailData> 
 
\t \t <Code>Ind</Code> 
 
\t \t <Name>India</Name> 
 
\t \t <Continent>Asia</Continent> 
 
\t \t <Region>Asia</Region> 
 
\t \t <Population>113Crore</Population> 
 
\t \t <IndependenceYear>1947</IndependenceYear> 
 
\t </DetailData> 
 
\t <DetailData> 
 
\t \t <Code>Ind</Code> 
 
\t \t <Name>India</Name> 
 
\t \t <Continent>Asia</Continent> 
 
     <Region>Asia</Region> 
 
\t \t <Population>113Crore</Population> 
 
\t \t <IndependenceYear>1947</IndependenceYear> 
 
\t </DetailData> 
 
</Root>

我目前的首要任務是建設JSON字符串。一旦JSON可用，我可以將數據轉換爲XML。

來源

2016-06-14 Amit Anand

你的json示例沒有任何意義。你有多個具有相同名稱的項目。這不是json的工作原理。 –

不應該將XML中的'DetailData'節點包裝在父節點中嗎？（'DetailDatas'或其他性質） – David

你可能會考慮將你的問題限制爲JSON。您想將JSON轉換爲XML的事實對於您的實際問題而言非常重要。你的問題會更容易閱讀。 –

如果所有<td>'標籤具有名屬性，那麼你可以將其轉換爲使用jQuery的幾行的JSON對象...

var poop = []; 
$("#MyTable").find("tr").each(function(){ 
    var fart = {}; 
    if(!$(this).find("td").length) return; 
    $(this).find("td").each(function(){ 
     fart[$(this).attr("name")]=$(this).text(); 
    }); 
    poop.push(fart); 
}); 

console.log(poop);

這裏是一個工作示例：fiddle.

來源

2016-06-14 19:39:30

誰試圖編輯答案，請在編輯人員的答案之前閱讀該問題。這個答案與表單完全無關。 –

嗨，Pootie，我試過了你提供的選項。但它並不富有成效。它返回json對象和數組。但我想要變量內的數組 –

將HTML表單轉換爲JSON對象

回答

相關問題