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中将Object转换为String函数代码 (json str)
Apr 29 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
php中实现记住密码自动登录的代码
2011/03/02 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php实现映射操作实例详解
2019/10/02 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python检测服务器端口代码实例
2019/08/31 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
师生聚会感言
2014/01/26 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
个人违纪检讨书
2014/09/15 职场文书
初中家长评语大全
2014/12/26 职场文书
2015年母亲节寄语
2015/03/23 职场文书
科技活动总结范文
2015/05/11 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers