將復雜form表單序列化serialize-object.js

來源：http://www.helloweba.com/view-blog-395.html

在實際項目開發中，我們可能會遇到復雜表單的提交處理，我們使用Ajax異步來將這個足夠復雜的表單提交給后端處理。常規的辦法是將表單各個字段組成字符串或者json格式，然后post給后端PHP處理，這樣的話稍微復雜的表單就會讓前端會非常累，因為要一個個表單字段處理。而jQuery自帶的$.fn.serialize和$.fn.serializeArray都不能滿足需求。幸好，我給大家介紹一款序列化json和對象的jQuery插件——jquery.serialize-object.js。

我用實例來演示如何將復雜的表單序列化：
HTML5

以下是一個普通的表單，不算復雜，僅用作演示，實際項目中的表單比這復雜多了。

<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="[e-mail]"> 
    </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>

細心的朋友會發現，我把每個表單元素命名成如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="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":"[e-mail]","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