首页 > 代码库 > 锋利的jQuery-6--序列化函数serialize()和serializeArray()在表单提交中的作用
锋利的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
锋利的jQuery-6--序列化函数serialize()和serializeArray()在表单提交中的作用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。