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显示隐藏层比较不错的方法分析
Sep 30 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
js自定义回调函数
Dec 13 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php文件上传类完整实例
2016/05/14 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
google地图的路线实现代码
2009/08/20 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
大学生毕业求职的自我评价
2013/09/29 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
公务员保密承诺书
2014/03/27 职场文书
节约粮食标语
2014/06/18 职场文书
公务员个人总结
2015/02/12 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
离婚被告代理词
2015/05/23 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android