将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对象

回答

相关问题