在实际项目开发中，我们可能会遇到复杂表单的提交处理，我们使用Ajax异步来将这个足够复杂的表单提交给后端处理。常规的办法是将表单各个字段组成字符串或者json格式，然后post给后端PHP处理，这样的话稍微复杂的表单就会让前端会非常累，因为要一个个表单字段处理。而jQuery自带的$.fn.serialize和$.fn.serializeArray都不能满足需求。幸好，我给大家介绍一款序列化json和对象的jQuery插件——jquery.serialize-object.js。
我用实例来演示如何将复杂的表单序列化：
HTML5
以下是一个普通的表单，不算复杂，仅用作演示，实际项目中的表单比这复杂多了。
<form class="form-horizontal" role="form" action="" method="post">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Email" value="demo@example.com">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">技能</label>
<div class="col-sm-10">
<label class="checkbox-inline">
<input type="checkbox" value="html5"> HTML5
</label>
<label class="checkbox-inline">
<input type="checkbox" value="javascript" checked> Javascript
</label>
<label class="checkbox-inline">
<input type="checkbox" value="PHP" checked> PHP
</label>
<label class="checkbox-inline">
<input type="checkbox" value="Python"> Python
</label>
<label class="checkbox-inline">
<input type="checkbox" value="MySQL" checked> MySQL
</label>
<label class="checkbox-inline">
<input type="checkbox" value="Redis"> Redis
</label>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">月薪</label>
<div class="col-sm-10">
<select class="form-control">
<option value="5000">5000以下</option>
<option value="5000-10000">5000-10000</option>
<option value="10000-20000">10000-20000</option>
<option value="20000">20000以上</option>
</select>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">自我评价</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
细心的朋友会发现，我把每个表单元素命名成如name="user[email]"这样的格式，这么做就是为了好序列化成json或object。别着急，来看jQuery调用代码。
jQuery
首先载入jquery库和jquery.serialize-object.js，在我打包的源码中这两个js文件，其中jQuery是引用的CDN资源。
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.likecs.com/js/jquery.serialize-object.min.js"></script>
当我们填写完表单后，点击提交按钮，整个表单元素被序列化成JSON数据，然后通过post异步提交给了post.php处理，来看代码：
$(function(){
$(document).on(\'click\', \'#subbtn\', function(event) {
event.preventDefault();
var json_data = $(\'#myform\').serializeJSON();
$.post(\'post.php\', json_data, function(data) {
console.log(data);
});
});
});
上述代码中，我们只需要使用$(\'#myform\').serializeJSON()就可以获得整个表单所有字段的数据，并以json格式序列化，这时post的数据变成以下格式：
{"user":{"email":"demo@example.com","skill":["html5","javascript","PHP","MySQL"],"salary":"5000","intro":"的撒的\r\n天654\r\n第三方"}}
得到的是一个json格式的数据，看起来是不是很爽了。
当然jquery.serialize-object.js还提供了一个序列化对象的方法：serializeObject，使用如下代码可以得到一个javascript object对象：
var obj_data = $(\'#myform\').serializeObject();
PHP
前端将表单数据序列化成json格式的数据了，而且通过Ajax一次性POST给到PHP，那么PHP该怎么获取这些表单数据呢？由于前端post过程属于原生的数据post，PHP不能通过$_POST[]来接收表单数据，
而要通过php://input来接收post数据。关于PHP如何接收post数据，可以参考本站文章：PHP接收POST数据方式。
$data = file_get_contents(\'php://input\');
print_r(json_decode($data, true));
PHP接收到post数据后，可以将其转成数组就可以很好的操作数组了。
更多有关表单数据序列化的内容，请参考jQuery Serialize Object项目github地址：https://github.com/macek/jquery-serialize-object