将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。
http://zhengxinlong.iteye.com/blog/848712
将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。
/// <reference name="jquery.js" description="1.3.2版本以上" />
/*!* 扩展jQuery表单序列化函数:{ Version: 1.2, Author: Eric.Zheng, CreateDate: 2010-12-21 }
*
* 消除了jQuery.serialize()只能对form进行序列化的局限
* 该插件可以对任意jQuery对象进行序列化
* 返回数据格式有两种:1.<name&value>(默认) 2.json
*
* 调用方法:$(dom).form_serialize(dataType);
* 参数(可省略):dataType: 默认为html,即返回数据格式为<name&value>;若要返回json格式,则dataType = json;
* 返回数据:序列化表单数据
*
* BUG修复:修复了1.0版本中,多个Dom元素使用同一个name属性时,获取的数据有缺失。
*
**/
(function ($) {
var formJson = {};
var currentForm = null;
$.fn.form_serialize = function (dataType) {
currentForm = $(this);
formJson = {};
var doms = currentForm.find('[name]');
$.each(doms, function (index, dom) {
var domName = $(dom).attr('name');
if (!formJson[domName]) {
formJson[domName] = { Name: domName, Type: $(dom).attr('type'), Doms: currentForm.find('[name=' + domName + ']') };
}
});
return getResult(dataType);
};
var getResult = function (dataType) {
var d = {
toJson: function () {
var data = {};
$.each(formJson, function (key, json) {
data[key] = getVal(json);
});
return data;
},
toString: function () {
var val = '';
var index = 0;
$.each(formJson, function (key, json) {
var prefix = '&';
if (index == 0) prefix = '';
index++;
val += prefix + key + '=' + getVal(json);
});
return val;
}
};
return dataType == 'json' ? d.toJson() : d.toString();
}
var getVal = function (json) {
var methods = {
getDefaultVal: function (dom) {
return $(dom).val();
},
getSelectVal: function (dom) {
var val = '';
var selectType = $(dom).attr('type');
if (selectType == 'select-multiple') {
var items = $(dom).val();
if (items == null) return '';
for (var i = 0; i < items.length; i++) {
val += i == 0 ? items[i] : (',' + items[i]);
}
return val;
} else {
return $(dom).val();
}
},
getRadioVal: function (dom) {
return $(dom).attr('checked') ? $(dom).val() : null;
},
getCheckBoxVal: function (dom) {
return methods.getRadioVal(dom);
}
};
var dispacher = function (type, dom) {
switch (type) {
case 'text':
case 'password':
case 'hidden':
case 'textarea':
return methods.getDefaultVal(dom);
case 'select-one':
case 'select-multiple':
return methods.getSelectVal(dom);
case 'radio':
return methods.getRadioVal(dom);
case 'checkbox':
return methods.getCheckBoxVal(dom);
default:
return '';
}
};
var domType = json.Type;
var doms = $(json.Doms);
var count = doms.length;
if (count > 1) {
var val = '';
var index = 0;
for (var i = 0; i < count; i++) {
var v = dispacher(domType, doms.eq(i));
if (v == '' || v == null || v == undefined)
continue;
val += index++ == 0 ? dispacher(domType, doms.eq(i)) : (',' + dispacher(domType, doms.eq(i)));
}
return val;
} else {
return dispacher(domType, doms);
}
};
})(jQuery);
将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name&value>格式和JSON格式。的更多相关文章
- 第一百五十九节,封装库--JavaScript,表单序列化结合ajax提交数据
封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...
- (转)jquery serialize表单序列化,当radio或checkbox 未选中时,没有序列化到对象中的原因分析和解决方案 - ghostsf
相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...
- jQuery实现form表单序列化转换为json对象功能示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...
- Jquery表单序列化和AJAX全局事件
Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...
- 判断一个jquery对象是否为空
今天用jquery $获取一个jquery对象.$("#id") 然后用判断这个对象是否存在,id不存在的时候,判断这个是否存在, if($("#id")) 始 ...
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- $ 和getElementId的区别 / 一个jquery对象的原型
请说出 div 和 $div 的联系和区别 区别 div 返回一个HTML DOM Object $div 返回一个 jQuery Object, 两者不等价 $div是包装了dom对象后产生的,无法 ...
- jquery ajax(5)form表单序列化
form表单序列化<script type="text/javascript"> $(function(){ $("#send").click(fu ...
随机推荐
- ubuntu中文乱码--添加中文字符集
在Ubuntu支持中文后(方法见上篇文章),默认是UTF-8编码,而Windows中文版默认是GBK编码.为了一致性,通常要把Ubuntu的默认 编码改为GBK.当然你也可以不改,但这会导致我们在两个 ...
- 详细的linux目录结构详细介绍
详细的linux目录结构详细介绍 --树状目录结构图 下面红色字体为比较重要的目录 1./目录 目录 描述 / 第一层次结构的根,整个文件系统层次结构的根目录 /bin/ 需要在单用户模式可用的必要命 ...
- ios 深入讲解iOS键盘一:控制键盘隐藏显示
在iOS的开发中,我们一般使用UITextField.UITextView处理文字输入等操作,大部分情况下我们只需要一两行代码去手动管理键盘的显示隐藏:让UITextField或UITextView成 ...
- 安卓常用的xml控件配件的使用包含shape,declare-styleable、selector
今天就讲我所遇到的常用到的一些通过xml文件制作的背景效果,以后用到的话就直接使用啦!哈哈,我一向就是这么懒! 接下来,就开始介绍了 1.shape的使用,可以混合使用 xml控件配置属性 andro ...
- byte[] 、Bitmap与Drawbale 三者直接的转换
经常遇到这种类似头疼的问题 byte[] .Bitmap与Drawbale 三者直接的转换 1.byte[] ->Bitmap Bitmap Bitmap = BitmapFactory.dec ...
- Python 字符串拼接、格式化输出、深浅复制
拼接:"+"号(同类型可拼接) >>>li = [1,2] >>>li + li [1,2,1,2] >>>li*2 [1,2 ...
- 【BZOJ3769】spoj 8549 BST again DP(记忆化搜索?)
[BZOJ3769]spoj 8549 BST again Description 求有多少棵大小为n的深度为h的二叉树.(树根深度为0:左右子树有别:答案对1000000007取模) Input 第 ...
- 【BZOJ4894】天赋 有向图生成树计数
[BZOJ4894]天赋 Description 小明有许多潜在的天赋,他希望学习这些天赋来变得更强.正如许多游戏中一样,小明也有n种潜在的天赋,但有一些天赋必须是要有前置天赋才能够学习得到的.也就是 ...
- c++的检测的确比C++更严格
见下面代码 #include <stdio.h> #include <stdlib.h> #include <time.h> enum guess { paper, ...
- VS2015 C#6.0 中的那些新特性(转自http://www.cnblogs.com/henryzhu/p/new-feature-in-csharp-6.html)
自动属性初始化 (Initializers for auto-properties) 以前我们是这么写的 为一个默认值加一个后台字段是不是很不爽,现在我们可以这样写 只读属性的初始化(Getter-o ...