jQuery扩展 form序列化到json对象

jQuery没有直接支持form到json的序列化方法，目前网上有一个实现是这样的

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$.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对于普通的对象转换是足够的，但是如果出现对象内部又包含子对象的情形就不能支持了。

例如我有这样的一个form表单：

 

1 2 3 4 5

< form id="testform">      < input type="text" name="name" value="dummyName" id="name">      < input type="text" name="category.id" value="categoryId" id="name">      < input type="text" name="category.name" value="categoryName" id="name"> </ form >

对应到server端上的domain class是这样的：

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

public class DummyProduct {            private DummyCategory category;      private String name;            public DummyCategory getCategory() {          return category;      }        public void setCategory(DummyCategory category) {          this .category = category;      }        public String getName() {          return name;      }        public void setName(String name) {          this .name = name;      }       }     public class DummyCategory {      private String id;      private String name;        public String getId() {          return id;      }        public void setId(String id) {          this .id = id;      }        public String getName() {          return name;      }        public void setName(String name) {          this .name = name;      } }

 

 

如果想把表单数据序列化成跟server端domain class匹配的json字符串，就可以使用我下面的这个扩展

 

1	/** @serializedParams looks like "prop1=value1&prop2=value2" .

1	Nested property like 'prop.subprop=value' is also supported **/

1	function paramString2obj (serializedParams) {

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

var obj={};      function evalThem (str) {          var attributeName = str.split( "=" )[0];          var attributeValue = str.split( "=" )[1];          if (!attributeValue){              return ;          }                    var array = attributeName.split( "." );          for ( var i = 1; i < array.length; i++) {              var tmpArray = Array();              tmpArray.push( "obj" );              for ( var j = 0; j < i; j++) {                  tmpArray.push(array[j]);              };              var evalString = tmpArray.join( "." );              // alert(evalString);              if (!eval(evalString)){                  eval(evalString+ "={};" );                             }          };                eval( "obj." +attributeName+ "='" +attributeValue+ "';" );                };        var properties = serializedParams.split( "&" );      for ( var i = 0; i < properties.length; i++) {          evalThem(properties[i]);      };        return obj; }     $.fn.form2json = function (){      var serializedParams = this .serialize();      var obj = paramString2obj(serializedParams);      return JSON.stringify(obj); }

 

 

使用起来大概像这个样子:

 

1 2	var json = $( "#testform" ).form2json(); alert(json);