论坛首页 Web前端技术论坛

serializeObject——序列化Form表单到一个对象

浏览 12340 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-04-03  
转贴danheberden的代码
下面的代码能够将Form表单的值转化成一个Javascript对象,觉得在构建Form表单值的对象时代码实现上比较好,故转贴分享一下.
/* 
* .serializeObject (c) Dan Heberden
* danheberden.com
* 
* Gives you a pretty object for your form elements
*/
(function($){
  $.fn.serializeObject = function() {
    if ( !this.length ) { return false; }

    var $el = this,
      data = {},
      lookup = data; //current reference of data

      $el.find(':input[type!="checkbox"][type!="radio"], input:checked').each(function() {
        // data[a][b] becomes [ data, a, b ]
        var named = this.name.replace(/\[([^\]]+)?\]/g, ',$1').split(','),
            cap = named.length - 1,
            i = 0;

        for ( ; i < cap; i++ ) {
            // move down the tree - create objects or array if necessary
            lookup = lookup[ named[i] ] = lookup[ named[i] ] ||
                ( named[i+1] == "" ? [] : {} );
        }

        // at the end, psuh or assign the value
        if ( lookup.length != undefined ) {
             lookup.push( $(this).val() );
        }else {
              lookup[ named[ cap ] ]  = $(this).val();
        }

        // assign the reference back to root
        lookup = data;
      });

    return data;
  };
})(jQuery);

实例
<div id="test">
    <input name="text1" value="txt-one" />
    <input type="checkbox" name="top[child][]" value="1" checked="checked" />
    <input type="checkbox" name="top[child][]" value="2" checked="checked" />
    <input type="checkbox" name="top[child][]" value="3" checked="checked" />
    
    <select name="another[select]">
        <option value="opt"></option>
    </select>
</div>

$( '#test' ).serializeObject();

Returns

{ text1: "txt-one",
  top: {
    child: [ "1", "2", "3" ]
  },
  another: {
    select: "opt"
  }
}
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics