锋利的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
时间: 2024-11-03 20:46:58

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

使用jquery form插件进行异步带文件的表单提交

引入form插件与jquery 的js文件后 获取表单的jq对象 然后.ajaxSubmit提交表单即可 实现添加品牌的异步表单提交 function addBarandImg(formId) { $('#'+formId).ajaxSubmit({ url: '/ProductManage/AddBrand', //data: $("#" + formId).serialize(), type: 'post', dataType: "json", success:

jQuery的序列化元素 serialize()方法 serializeArray()方法 param()方法

当提交的表单元素较多时用serialize()方法,serialize()方法也是作用于一个jQuery的对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. .serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>.不过,选择 <form> 标签本身进行序列化一般更容易些: $(

extract函数在表单提交中提供的方便之处

extract - 从数组中将变量导入到当前的符号表 在form.html中, <!DOCTYPE html> <html> <head> <title>extract</title> <meta charset="utf-8"> </head> <body> <div> <form action="action.php" method="po

jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

原始form表单值获取方式(手动): $.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上星&position=IT技术", success: function(msg){alert(msg);}, error: function(error){alert(error);} }); JQ serialize()方法取值: $.ajax({ type: "POST&quo

Jquery form表单提交

起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器的兼容性的. 1.序列化form,通过Ajax提交 $.ajax({ cache: false, type: "POST", url: "readImage.do", data: $('#ff').serialize(), //序列化表单数据 async: true,

jquery插件-表单提交插件-jQuery.Form

1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSubmit 让我们方便的实现无刷新效果提交表单! http://malsup.com/jquery/form/ https://github.com/malsup这个因该是作者的gitbub,我下载看了一下那个readme文件竟然是 API 2.快速入门 1.引入插件 (方法同jQuery) 2.将表

jquery.form.js(ajax表单提交)

Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started 一.准备工作 写一个表单: <form id="reg" action="123.php" method="post"> <p> <label for

jQuery最简单的表单提交方式

第一步:绑定事件 常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selector).keyup(function) 4.$(selector).submit(function) 提交表单前,阻止提交按钮的默认的action,或返回false,如: 1.阻止提交按钮的默认的action $("form").submit(function(e){    e.preven

jQuery表单提交

[转自]jQuery最简单的表单提交方式 第一步:绑定事件 常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selector).keyup(function) 4.$(selector).submit(function) 提交表单前,阻止提交按钮的默认的action,或返回false,如: 1.阻止提交按钮的默认的action $("form").submit(fun