锋利的jQuery-6--序列化函数serialize()和serializeArray()在表单提交中的作用

在通过jQuery ajax提交表单的时候，通常用下边的方法获取表单内容。

　　var form = 'add-account-form';    //表单id
    $('#' + form).submit(function() {
        　　　　var account = {
                                'user_id':'',
                                'partner_name':'',
                                'site_url': '','product_url':''
              　};
                for(var i in account) {
                        if (account.hasOwnProperty(i)) {  //hasOwnProperty函数判断对象中是否含有某个成员。
                                if ($('#' + form + ' input[name=' + i + ']').length > 0) account[i] = $('#' + form + ' input[name=' + i + ']').val();  //此处只能用account[i]的形式，不能用account.i
                                if ($('#' + form + ' select[name=' + i + ']').length > 0) account[i] = $('#' + form + ' select[name=' + i + ']').val();
                        }
                }
                $.post('/pc/account', {'data':account, 'op':'add'}, function(data) {  });
                       
    });

1.serialize()

可以通过jquery的serialize方法，因为$.get, $.post, $.ajax的数据部分可以传映射形式{"name" : "lee", "age" : "18"}，也可以传字符串形式name=lee&age=18。

var form = 'add-account-form';
    $('#' + form).submit(function() {
        　　　　var account = $(this).serialize();  //获取表单的所有name值做为key,val做为value的字符串，用&连接。
               $.post('/pc/account', {'data':account, 'op':'add'}, function(data) {  });
                       
    });

 

注意：

用字符串方式的时候需要注意对字符编码(中文)，用serialize()方法会自动编码。

serialize()方法作用于jQuery对象，所以不光表单能用，其他选择器也能用,例如 $(":checkbox, :radio").serialize();

　<input type="checkbox" name="check" value="中国人"/> 中国人
  <input type="checkbox" name="check" value="美国人" />美国人
  
　　/* 如果两个多选框都被选中的话，serialize方法不会合并值，而是生成好几个同名的值 */
　$("form").serialize();  //check=%E4%B8%AD%E5%9B%BD%E4%BA%BA&check=%E7%BE%8E%E5%9B%BD%E4%BA%BA   //生成check=***&check=***形式,并且中文被编码

2.serializeArray()

该方法不是返回字符串，而是将dom元素序列化后，返回json格式。

var f = $(":checkbox, :radio").serializeArray();  //获得多选框和单选框的值
console.log(f);  //在控制台查看

$.each(f, function(i, field){  //f是一个对象，可以通过$.each方法遍历
　　$("$result").append(field.value + " , ");
})

 

3.$.param()

他是serialize()方法的核心，用来对数组和对象按照key/value形式序列化。

var obj = {a:1,b:2,c:3}
var s = $.param(obj);  //a=1&b=2&c=3