jquery和json表单操作(二)

上一章讲到使用jquery和json给一个表单赋值,既然有赋值动作，那么就应该有取值，好，进入正题。

大家使用过json插件的就应该明白json js中有$.fn.serializeObject 插件方法。使用该方法可以简单的就将一个表单序列化为json对象。

表单中的元素 {name：value , ...} . 如果项目中使用的是 struts2，很多人就会很困惑了，比如一个 UserAction 中有一个对象属性

　User ser;给了get,set方法,（User 中包含用户基本属性信息,也给了相应的set和get方法） ，

假如 我们要实现请求这个action 并给这个user赋值 ，将user添加一个新记录，如果是在jsp采用struts2表单元素的话， 属性元素中 name="user.属性"，表单元素请求该 action的添加方法 ,这个是最基本的方式，很简单就可以实现。但我们要使用ajax实现这一个步骤，我们设置表单通 属性元素 name="user.属性" 这种方式，然后使用$.fn.serializeObject方法序列化这个表单提交数据到action中，没错，这样user对象会有赋值的数据。但我们通常不习惯在一个表单中 把属性元素设置成 name="user.属性"

而跟喜欢  name="属性" 这样，如果还是用ajax请求，那么我们就会先一个一个获取表单中属性的值，然后在把它们转换成对应的{ user.属性:value ，...}这种提交。这比上一种方式多了一步，也多了很多的代码. 当然你还可以使用struts 的模型驱动方式给user 赋值,对于一个简单的action是可以做到的（假如一个action中就只有一个属性对象模型驱动只能针对一个）。

好了我们开始进入话题吧，我使用jquery 和 json 把一个表单自定义序列化，给struts2 action中的属性赋值.

Action:

User user;

public void setUser(User user){

　　this.user=user;

}

html:

<form name="dome-form" id="dome-form">

　　<input type="text" name="id" value="1000"/>

　　<input type="text" name="name" value="JTtao"/>

　　<input type="radio" name="sex" value="男" checked="checked"/><input type="radio" name="sex" value="女"/>

　　<select name="age"><option value="18">18</option><option value="19">19</option><option value="20" checked="checked">20</option></select>

</form>

javascript:

<script>

//jquery 插件对象
 
/**
 *
 * 序列话一个表单,并给该表单中每一个字段添加别名
 * @author jt.tao QQ:1453566283
 * @param {Object} n 表单对象别名
 * @memberOf {TypeName}
 * @return {TypeName}
 */
$.fn.serializeObjectForm = function(n)
{

    if(!n) { alert('序列化表单请给别名!'); return null};//在此临时简单处理n，还有待你们完善呀...
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[n+"."+this.name]) {
            if (!o[n+"."+this.name].push) {
                o[n+"."+this.name] = [o[n+"."+this.name]];
            }
            if(this.value != ""){
                o[n+"."+this.name].push( this.value );
            }
        } else {
            if(this.value != ""){
                o[n+"."+this.name] = this.value;
            }
        }
    });
    return o;
};

//调用

var userdata=$("#dome-form").serializeObjectForm('user');

 userdata={'user.id':1000,'user.name':'JTtao','user.sex':'男','user.age':20};

</script>

使用这个方法在原来的json 插件方法上做了一点小的改进，却解决了一个很大的问题,呵呵，这样的话我们可以序列对多个表单一同请求一个有多个

属性对象的action也照样会赋值的，呵呵。当然给出的只是我随便写了下，没有对该方法的参数 n 做进一步的判断，比如如果没有参数就不应该使用 "."+属性

的问题，而是直接将该属性和值加入到对象中去; 有兴趣的同志们可以做进一步的处理，使之更强大。这次只是将了下关于struts 2 action 对象赋值的问题，并没有多大的技术含量， 如果有什么疑惑请给我留言。欢迎大家给我意见，一起探讨技术。

别忘了，下章还会讲一个更加强大的jquery和json操作表单的技术，不要忘记来看下哦.