将 HTML 表单转换为 JSON 对象
Posted
技术标签:
【中文标题】将 HTML 表单转换为 JSON 对象【英文标题】：Convert HTML Form to JSON Object 【发布时间】：2016-10-15 16:17:54 【问题描述】：我想。该表单基本上包含两个部分，标题和详细信息。 Header 部分包含一些 html 输入框，Detail 部分是一个表格。我的表单的虚拟视图如下。
<!DOCTYPE html>
<html lang="en">
<body>
<form id="MyForm" method="POST">
<div name="HeaderData">
<label id="lblFname">First Name:</label>
<input type="text" name="fname"/> <br/>
<label id="lblLname">Last Name:</label>
<input type="text" name="lname" /> <br/>
<label id="lblEmail">Email:</label>
<input type="text" name="email" /> <br/>
</div>
<div id="DetailData">
<table cellspacing="0" align="Center" rules="all" border="1" id="MyTable" style="width:940px;border-collapse:collapse;">
</thead>
<th scope="col">Code</th>
<th scope="col">Name</th>
<th scope="col">Continent</th>
<th scope="col">Region</th>
<th scope="col">Population</th>
<th scope="col">Independence Year</th>
</thead>
<tbody>
<tr>
<td name="Code">Ind</td>
<td name="Country">India</td>
<td name="Continent">Asia</td>
<td name="Region">Asia</td>
<td name="Population">113Core</td>
<td name="Independence">1947</td>
</tr>
<tr>
<td name="Code">Ind</td>
<td name="Country">India</td>
<td name="Continent">Asia</td>
<td name="Region">Asia</td>
<td name="Population">1500000</td>
<td name="Independence">1947</td>
</tr>
</tbody>
</table>
</div>
</body>
</form>
</html>我希望生成的 JSON 对象能够模仿：
"HeaderData":["Fname":"XYZ","LName":"ABC","Email":"ABC@XYZ.COM"],
"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>
<HeaderData>
<FName>XYZ</FName>
<LName>XYZ</LName>
<Email>abc@xyz.com</Email>
</HeaderData>
<DetailData>
<Code>Ind</Code>
<Name>India</Name>
<Continent>Asia</Continent>
<Region>Asia</Region>
<Population>113Crore</Population>
<IndependenceYear>1947</IndependenceYear>
</DetailData>
<DetailData>
<Code>Ind</Code>
<Name>India</Name>
<Continent>Asia</Continent>
<Region>Asia</Region>
<Population>113Crore</Population>
<IndependenceYear>1947</IndependenceYear>
</DetailData>
</Root>我目前的首要任务是构建 JSON STRING。一旦 JSON 可用，我就可以将数据转换为 XML。
【问题讨论】：
您的 json 示例毫无意义。您有多个具有相同名称的项目。这不是 json 的工作方式。 XML 中的DetailData 节点不应该包装在父节点中吗？ （DetailDatas 或类似的东西）
您可能会考虑将您的问题限制为 JSON。您想要将 JSON 转换为 XML 的事实对于您的实际问题来说是多余的。你的问题会更容易阅读。
嗨，Philip Raath，请注意，这里 xml 中的每个详细信息部分实际上都将作为一行插入到表中。如果您有出路，请提出建议。
【参考方案1】：
如果你所有的 <td> 都有一个 name 属性，你可以用几行 jQuery 将它转换成一个对象...
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 对象和数组。但我想要变量中的数组以上是关于将 HTML 表单转换为 JSON 对象的主要内容，如果未能解决你的问题，请参考以下文章