首先感谢万能的 Google 和互联网的分享精神，然后感谢 Stack Overflow 和 GitHub。
最近在进行的项目，后端服务器需要前端把提交的表单的数据以 json 数据的形式发送给服务器，如果没处理每个数据是以 & 连接起来的，如下图。如果是 json 形式的，后端会比较好处理。
为了让数据转换为 json 形式，查看了大量的博客和网站，看到了好几种解决方案。
方案一
最先看到的方法是调用 jQuery 的方法序列化数据，然后转成 json 格式。具体实现如下
var data = $("#student-form").serializeArray(); //序列化表格内容为字符串 var json = JSON.stringify(data);
但这种用 alert 或者 console.log 打印出来，看到 json 的格式是每个数据都有 name 和 value 一一对应，如图
这种形式肯定不是我们想要的，所以继续找。必须是把 name 和value 过滤的。
方案二
找到一个博客，号称是 form 转 json 最佳示例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/javascript" src="js/jquery-2.0.3.js"></script>
<title> 无标题文档 </title>
<script type="application/javascript">
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
function onClik(){
//var data = $("#form1").serializeArray(); // 自动将 form 表单封装成 json
//alert(JSON.stringify(data));
var jsonuserinfo = $('#form1').serializeObject();
alert(JSON.stringify(jsonuserinfo));
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p> 进货人 :
<label for="name"></label>
<input type="text" name="name" id="name" />
</p>
<p> 性别:
<label for="sex"></label>
<select name="sex" size="1" id="sex">
<option value="1"> 男 </option>
<option value="2"> 女 </option>
</select>
</p>
<table width="708" border="1">
<tr>
<td width="185"> 商品名 </td>
<td width="205"> 商品数量 </td>
<td width="296"> 商品价格 </td>
</tr>
<tr>
<td><label for="pro_name"></label>
<input type="text" name="pro_name" id="pro_name" /></td>
<td><label for="pro_num"></label>
<input type="text" name="pro_num" id="pro_num" /></td>
<td><label for="pro_price"></label>
<input type="text" name="pro_price" id="pro_price" /></td>
</tr>
<tr>
<td><input type="text" name="pro_name2" id="pro_name2" /></td>
<td><input type="text" name="pro_num2" id="pro_num2" /></td>
<td><input type="text" name="pro_price2" id="pro_price2" /></td>
</tr>
</table>
<p> </p>
<input type="button" name="submit" onclick="onClik();" value="提交"/>
</form>
</body>
</html>
================================================================================================================================
jQuery 是在 web 应用中使用的脚本语言之一，因其具有轻量级, 易学易用等特点，已广泛应用，其中的 ajax 封装简化了我们的应用，对其表单数据序列化用如下方法：
1. serialize() 方法
格式：var data = $(“#formID”).serialize();
功能：将表单内容序列化成一个字符串。
这样在 ajax 提交表单数据时，就不用一一列举出每一个参数。只需将 data 参数设置为 $(“form”).serialize() 即可。
2. serializeArray() 方法
格式：var jsonData = $(“#formID”).serializeArray();
功能：将页面表单序列化成一个 JSON 结构的对象。注意不是 JSON 字符串。
比如，[{“name”:”lihui”},{…}] 获取数据为 jsonData[0].name
3. $.param() 方法，可以把 json 格式数据序列化成字符串形式
此方法是在方案一的基础上修改的，集成的很好，很简单也容易移植。但我们的项目的 json 需要能够嵌套的。所以此方法，还是暂时先放放，如果不需要嵌套的话，这个还是挺好的。
方案三
目前为止的方案还是不能满足后端 json 数据能嵌套的需求，最后的在 Stack Overflow 里找到了我想要的。
里面有个哥们提的问题跟我的类似，排名第二的回答者在 GitHub 上创建了自己的项目 jquery-serialize-object，专门用来解决这个问题。
后面看到另一个哥们在 GitHub 的项目 jquery.serializeJSON 也不错，只是在 HTML 写嵌套的 name 需要注意是不同的标准，最后的效果是相同的。这两个都可以使用。
我最好采用的是方案三的第一种方法。
HTML 头部引用 js，HTML 上用方括号包涵会嵌套 json。
<input name="foo[bar]" value="a"> <input name="foo[bof]" value="b"> <input name="hello" value="world">
需要注意的是 ajax 需要添加 contentType: "application/json",