将HTML表单转换为JSON对象
我想将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。
如果所有<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.
谁试图编辑答案,请在编辑人员的答案之前阅读该问题。这个答案与表单完全无关。 –
嗨,Pootie,我试过了你提供的选项。但它并不富有成效。它返回json对象和数组。但我想要变量内的数组 –
你的json示例没有任何意义。你有多个具有相同名称的项目。这不是json的工作原理。 –
不应该将XML中的'DetailData'节点包装在父节点中吗? ('DetailDatas'或其他性质) – David
你可能会考虑将你的问题限制为JSON。您想将JSON转换为XML的事实对于您的实际问题而言非常重要。你的问题会更容易阅读。 –