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

时间:2022-06-22 07:48:32

在通过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