将复杂form表单序列化serialize-object.js

<form class="form-horizontal" role="form" id="myform" 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" id="email" name="user[email]" 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" name="user[skill][]" value="html5"> HTML5
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="user[skill][]" value="javascript" checked> Javascript
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="user[skill][]" value="PHP" checked> PHP
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="user[skill][]" value="Python"> Python
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="user[skill][]" value="MySQL" checked> MySQL
        </label>
        <label class="checkbox-inline">
          <input type="checkbox" name="user[skill][]" 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" name="user[salary]">
          <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" name="user[intro]" 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" id="subbtn">提交</button>
    </div>
  </div>

首先载入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="js/jquery.serialize-object.min.js"></script>

$(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接收到post数据后，可以将其转成数组就可以很好的操作数组了。

更多有关表单数据序列化的内容，请参考jQuery Serialize Object项目github地址：https://github.com/macek/jquery-serialize-object

marioizquierdo/jquery.serializeJSON

https://github.com/marioizquierdo/jquery.serializeJSON

技术交流QQ群：15129679