jquery选择符快速提取web表单数据示例


Posted in Javascript onMarch 27, 2014

本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法。

以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法。

我给需要提交数据每个表单域添加了一个额外的属性,用自己额外定义的属性"_postField"代替原来的name属性,比如<input type="text" _postField="name" /><input type="radio" _postField="sex" />之类,然后用query获取所有存在_postField属性的dom对象,并进行遍历,封装成以_postField的值为key,其内容为value的json键值对,其js的方法如下:

<script type="text/javascript> 
function getFormField(sel){ 
var objs = $("*["+sel+"]"); 
var postData = {}; 
for(var i=0,len=objs.length;i<len;i++){ 
var obj = objs[i]; 
var nodeName = obj.nodeName.toLowerCase(); 
var field = $(obj).attr(sel); if(nodeName=="input"){ 
if(obj.type.trim()=="radio"&&(obj.checked||obj.checked=="checked")){ 
postData[field] = $(obj).val(); 
continue; 
} 
if(obj.type.trim()=="checkbox"&&(obj.checked||obj.checked=="checked")){ 
var ov = postData[field]||""; 
var nv = ov+","+$(obj).val(); 
postData[field] = nv.replace(/^,+/,""); 
continue; 
} 
if(obj.type.trim()=="text"||obj.type.trim()=="hidden"){ 
postData[field] = $(obj).val(); 
continue; 
} 
continue; 
} 
if(nodeName=="textarea"){ 
postData[field] = $(obj).val(); 
continue; 
} 
if(nodeName=="select"){ 
var val = obj.options[obj.selectedIndex].value; 
postData[field] = val; 
continue; 
} 
postData[field] = $(obj).html(); 
} 
//返回从表单获取数据的json数据 
return postData; 
} 
</script>

测试代码:
<form style="margin-left:200px; margin-top:300px;"> 
<input type="text" value="" _postField="name" /><br /><br /> 
<input type="radio" value="男" name="sex" _postField="sex" />男 
<input type="radio" value="女" name="sex" _postField="sex" />女 
<input type="radio" value="中性" name="sex" _postField="sex" />中性 <br /><br /> 
<select _postField="job"> 
<option value="上班">上班</option> 
<option value="讨饭">讨饭</option> 
<option value="啥都不相干">啥都不相干</option> 
</select> 
<br /><br /> 
<input type="button" value=" OK " onclick="test();" /> 
</form> 
<script> 
function test(){ 
var postData = getFormField("_postField"); var sb = []; 
for(var o in postData){ 
sb.push(o+"="+postData[o]); 
} 
alert(sb.join("\n")); 
} 
</script>

jquery选择符快速提取web表单数据示例 

以上例子的表单域比较少,一些东西体现不出,但当表单域的数量比较多少时,就能体现出其方便性,而且重用性较好;再者,如果用jquery异步提交的话,连手动封装json数据的操作都省了。
也有人可能不愿意给表单域增加类似“_postField”的自定义字段,那就直接用本身就有的name也行,这只是jquery选择符的使用不同,其实质还是一样的。

Javascript 相关文章推荐
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
js实现tab栏切换效果
Aug 02 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 #Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 #Javascript
js弹出确认是否删除对话框
Mar 27 #Javascript
js或jquery实现页面打印可局部打印
Mar 27 #Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 #Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 #Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 #Javascript
You might like
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
python进阶教程之异常处理
2014/08/30 Python
利用Python爬取可用的代理IP
2016/08/18 Python
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
解决python删除文件的权限错误问题
2018/04/24 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
python判断设备是否联网的方法
2018/06/29 Python
python 实现倒排索引的方法
2018/12/25 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
社区食品安全实施方案
2014/03/28 职场文书
党的群众路线调研报告
2014/11/03 职场文书
初中数学教学反思范文
2016/02/17 职场文书
《角的度量》教学反思
2016/02/18 职场文书