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 相关文章推荐
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
javascript事件处理模型实例说明
May 31 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 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的输入输出流
2007/02/14 PHP
PHP抽象类 介绍
2012/06/13 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
2018/09/27 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
node.js基础知识汇总
2020/08/25 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
Python处理Excel文件实例代码
2017/06/20 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
Python中property函数用法实例分析
2018/06/04 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
建筑行业的大学生自我评价
2013/12/08 职场文书
质检员岗位职责
2013/12/17 职场文书
怎样写离婚协议书
2014/09/10 职场文书
卖车协议书范例
2014/09/16 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
质量整改通知单
2015/04/21 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
为自己工作观后感
2015/06/11 职场文书